Vue中如何避免滥用this来读取data中的数据，改用何种长尾词方法？

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

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

1. 在组件的模板中直接使用this来访问data中的数据，应该使用插值表达式或绑定指令来直接引用data中的属性。

2.在计算属性或侦听器中，尽量避免使用this来访问data中的数据，而是直接使用data中的属性。

3.在方法中，除非确实需要通过上下文来访问data中的数据，否则应避免使用this。

总之，尽量保持代码的简洁性和可维护性，避免滥用this去访问data中的数据。

前言

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

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

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