学习Vue源码写Vue响应式原理

vue.js

observer.js

// foreach在循环次数未知或者计算起来较复杂的情况下效率比for循环高

然后在vue.js 第三步写 new Observer(this.$data)

//在defineReactive方法中，第三个参数val是data属性的值，在下面getter方法中return val 这里就形成了闭包（val是局部变量且没有被释放掉，外部可以引用这个方法并打印出值，控制台查看closure），这也是为什么不能return obj[key] , 会产生死递归（报错：最大堆栈超过了最大值）

如果使data的属性是对象，在defineReactive方法中加上：

	//如果val是对象，把val内部的属性转换成响应式数据
	this.walk(val)

如果修改msg的数据为对象，修改代码

compiler.js

在vue.js 第四步写 new Compiler(this)

from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。
// from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组
伪数组的特点:
1 必须要有length属性
2 如果length属性值是0,那么这个对象有没有元素无所谓;
3 如果length属性值不是0,那么这个对象一定有(length-1)为下标的属性值;

(.+)默认是贪婪匹配
(.+?)为惰性匹配
RegExp.$1 指的是与正则表达式匹配的第一个 子匹配(以括号为标志)字符串

dep.js

在Observer.js defineReactive方法里写上：
//负责收集依赖，并发送通知
let dep = new Dep()
set方法里：
//发送通知
dep.notify();
get方法里：

watch.js

compiler.js出修改

compileText方法中：