S6用的越来越多,箭头函数写顺了,函数大部分都写成了箭头函数。在Vue的watch中也顺手使用,然而出现了问题。组件中的数据并不能被同步修改。这里的this,并不是Vue的组件this
function 写法
此时的this才是Vue组件
箭头函数会改变this的指向,在Vue组件中,最好不要随便使用箭头函数。特别是watch以及生命周期中。!文档也有相应的提示
内容介绍:
watch属性介绍
watch属性,观测值的三种写法
watch观测对象注意不能使用箭头函数
watch的实战-观测数组内所有对象的某个值的变化
watch属性:watch是vue实列的一个属性,它是一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。
** 注意:不能使用箭头函数定义watcher(回调)函数,因为箭头函数绑定了父级作用域的上下文,所以里面的 this 将不会按照期望指向 Vue 实例**