一、 数据驱动
- 数据响应式、双向绑定、数据驱动
- 数据响应式:
数据模型仅仅是普通的 JavaScript 对象,而当我们修改数据时,视图会进行更新,
避免了复杂的 DOM 操作,提高开发效率。
- 双向绑定
数据改变,视图改变;视图改变,数据改变。
我们可以使用 v-model 在表单元素上创建双向数据绑定
- 数据驱动是 Vue 最独特的特性之一
开发过程中仅需要关注数据本身,不需要关心数据是如何渲染到视图上的。
二、 Vue2.X 响应式原理
- 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue
将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属
性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法
shim(降级)的特性,这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。
三、 Vue3.X 响应式原理
- 使用 Proxy 监听对象,而非属性,性能比 defineProperty 好。
四、 发布订阅模式
- 我们假设,存在一个“信号中心”,某个任务执行完成,就向信号中心“发布”publish
一个信号,其他任务可以向信号中心“订阅”subscribe 这个信号,从而知道自己什么
时候可以开始执行。这个就叫“发布/订阅模式”publish-subscribe pattern
五、观察者模式
- 观察者 Watcher
- 目标 Dep
- subs 数组:储存所有观察者
- addSub():添加观察者
- notify():当事件发生,调用所有观察者的 update()方法
- 没有事件中心
六、虚拟 DOM
- 手动操作 DOM 比较麻烦,还需要考虑浏览器兼容性问题,虽然有 jQuery 等库简化 DOM 操作,
但是随着项目的复杂,DOM 操作复杂提升
- 为了简化 DOM 的复杂操作于是出现了各种 MVVM 框架,MVVM 框架解决了视图和状态的同步问题,
为了简化视图的操作我们可以使用模板引擎,但是模板引擎没有解决跟踪状态变化的问题,
于是 Virtual DOM 出现了
- Virtual DOM 的好处是当状态改变时不需要立即更新 DOM,只需要创建一个虚拟树来描述 DOM,
Virtual DOM 内部将弄清楚如何有效(diff)的更新 DOM
- 参考 github 上 virtual-dom 的描述:
- 虚拟 DOM 可以维护程序的状态,跟踪上一次的状态
- 通过比较前后两次状态的差异更新真实 DOM
七、虚拟 DOM 的作用
- 维护视图和状态的关系
- 复杂视图情况下提升渲染性能
- 除了渲染 DOM 以外,还可以实现 SSR(Nuxt.js/Next.js),原生应用(Weex/React Native),小程序等