如何减少在Vue中过度使用this来访问data属性？

本文共计1996个文字，预计阅读时间需要8分钟。

前言：在Vue中，data选项是个好东西，把数据往里一丢，在一个Vue组件中任意一处地方都可以通过this来读取data中的数据。但是，要避免滥用this去读取data中的数据，至于在哪里要避免滥用，如下：

在模板中，应该直接使用插值表达式或指令来绑定数据，而不是通过this来访问data。

在计算属性中，应该尽量直接使用data中的数据，而不是通过this。

在方法中，如果需要访问data中的数据，应该直接使用data中的属性名，而不是通过this。

总之，尽量避免在Vue组件中滥用this去访问data中的数据，除非在组件的方法或计算属性中确实需要通过this来访问组件实例的其他属性或方法。

前言

在Vue中，data选项是个好东西，把数据往里一丢，在一个Vue组件中任何一个地方都可以通过this来读取data中数据。但是要避免滥用this去读取data中数据，至于在哪里要避免滥用，如果滥用会导致什么后果，本专栏将会一一揭晓。

一、用this读取data中数据的过程

在Vue源码中会把data中数据添加getter函数和setter函数，将其转成响应式的。