Vue watch侦听器中的函数与箭头函数

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 实例**

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ES6用的越来越多,箭头函数写顺了,函数大部分都写成了箭头函数。在Vue的watch中也顺手使用,然而出现了问题。...
    钱英俊真英俊阅读 5,612评论 0 2
  • 主要还是自己看的,所有内容来自官方文档。 介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 vie...
    Leonzai阅读 3,402评论 0 25
  • 以下内容是我在学习和研究Vue时,对Vue的特性、重点和注意事项的提取、精练和总结,可以做为Vue特性的字典; 1...
    科研者阅读 14,171评论 3 24
  • 你想要拥有不缺钱的人生吗? 你想有自由自在的生活吗? 你想躺在床上就开始赚钱吗? 那么请继续往下看吧 第一步,你要...
    郭圈圈无极限阅读 236评论 0 1
  • 不知道是不是因为,恰逢阳春三月的原因。这个月波波写作小组,给出的题目总带有“八卦”色彩。不是伊人,就是江湖。不是江...
    我係凡大头阅读 731评论 0 2