vue中$watch源码阅读笔记
项目中使用了vue,一直在比较computed和$watch的使用场景,今天周末抽时间看了下vue中$watch的源码部分,也查阅了一些别人的文章,暂时把自己的笔记记录于此,供以后查阅: 实现一个简单的$watch: 1 const v = new Vue({ 2 data:{ 3 a: 1, 4 b: { 5 c: 3 6 } 7 } 8 }) 9 // 实例方法$watch,监听属性"a" 10 v.$watch("a",()=>console.log("你修改了a")) 11 //当Vue实例上的a变化时$watch的回调 12 setTimeout(()=>{ 13 v.a = 2 14 // 设置定时器,修改a 15 },1000) View Code 这个过程大概分为三部分:实例化Vue、调用$watch方法、属性变化,触发回调 一、实例化Vue:面向对象的编程 1 class Vue { //Vue对象 2 constructor (options) { 3 this.$options=options; 4 let data = this._data=this.$options.data; 5 Object.keys(data).forEach(key=>this._proxy(key)); 6 // 拿到data之后,我们循环data里的所有属性,都传入代理函数中