⭐️ Vue 如何实现双向数据绑定的
Observer(观察者)
- 给 data 对象下所有的属性添加上 get 和 set 方法。
- get: 提供属性值的获取。每个属性如果是第一次调用 get 方法,就给当前属性添加上一个消息订阅器。
- set:当监听到值有改动时,让消息订阅器通知 watcher 更新页面
Compiler(指令解析器)
- 扫描根节点下的所有元素,找到每个节点上的指令并解析。
- 譬如一个 input 标签有个 v-model ,首先通过 vm 实例把属性名相同的值赋给它,再就是添加事件(input),在事件触发的时候把标签上的值赋值给 data 中相应的属性
- 如果是个
{{}}
,就给这个属性添加一个 watcher,在接收到消息订阅器的消息后调用 update 方法更新值
Dep(消息订阅器)
- 负责发布订阅
- 把订阅者放进数组中,每当 notify 被调用后(Observer 的 set 改变时触发),会通知 watcher 订阅者更新视图
Watcher(订阅者)
- 在消息订阅器上订阅每个属性的变化,在属性变化后收到消息执行回调 update 方法,从而更新视图
⭐️ watch,computed,method区别
computed
是有缓存的,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用;
methods
方法表示一个具体的操作,主要书写业务逻辑。只要调用就会再走一遍代码,不管有没有变化。
watch
一个对象,不存在缓存的。键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是computed
和methods
的结合体;
框架与库的区别
- 框架是一整套解决方案,对项目侵入性大,开发到后期如果想更换框架,相当于重写