这是我参与「第四届青训营 」笔记创作活动的第24天
最近学习了一下关于Vue数据双向绑定原理的知识,特意记录一下
他的实现利用了Object.defineProperty,所以先来看看这个方法能干啥
Object.defineProperty
developer.mozilla.org/zh-CN/docs/…
利用Object.defineProperty第三个参数的属性描述符中的存取描述符对user设置getter和setter,让user对象中的age属性在被读取值或者被修改值时可以监听到读取或修改的操作,然后采取操作
下面就让user的age在被读取或修改时或输出一些信息来表示他被读取或修改了
这样设置的属性颜色跟正常属性的颜色不太一样,但具体原因我不清楚
这是被访问时的情景gif,这里一开始user.age是 (…) 这样子应该是被Object.defineProperty监听才这样?
把它点开相当于是访问它了
现在知道Object.defineProperty能干啥了,他能给对象的属性设置getter和setter,让该属性在被访问或被修改的时候被监听到,这就为数据双向绑定提供了方便,这样可以在数据发生变化的时候做出处理
数据绑定
接下来实现一下vue的数据绑定,主要重点是数据绑定,一些地方的实现就略过的,实际上我也不会🤣
这里我们模仿new Vue的操作,传入el和data对象(在图里最底下)
我们要写一个模仿Vue的构造函数,这里是LcVue,构造其实例时传入一个选项对象,然后将其绑定到当前实例的属性上,
那怎么实现响应式数据呢? 这就要对传入的data进行一些改造,并且记录下依赖data的有关项,这样能在data发生变化时,让有关系的项也跟着变化
所以要遍历data的属性,对每一个属性都用Object.defineProperty进行改造, 把这些 属性(property) 全部转为 getter/setter。
这里像 编译模板,指令 和 处理订阅者的更新(那个update那里) 的实现就没有给出,一是跟数据绑定关系不大,二是我还不会
