vue基础--为什么篇

看官方文档做记录。

其实很多东西都是在 生命周期中，生命周期说的 差不多就能代表这个框架了。 多看生命周期 到底干了什么

• vue的模板语法有什么好的？

  • 模板语法可以让开发者 声明式的将DOM绑定至底层vue实例的数据。

  • 再者说 虚拟dom 这一块。

  • 在底层实现上，Vue将模板编译成虚拟DOM渲染函数。

• Vue.js 的 template 编译。

  • 1、 通过complie 编译器把 template 编译成 AST(Abstract Syntax Tree， 抽象语法树)， complie 是 createComplier 的返回值，CreateComplier 用来创建编译器。另外，complie 还负责合并option。
  • 2、 AST 会经过 gennerate (将AST转化成 render function 字符串的过程)得到render函数，render的返回值是 VNode 。
  • ​ VNode 是Vue.js的虚拟DOM节点，里面有标签名、子节点、文本等。

• vue双向绑定的原理是什么？

  • vue.js 采用ES5 提供的属性特性功能，结合订阅者-发布者模式， 通过 Object.defineProperty() 为各个属性定义get , set 特性方法，在数据发生改变时 给 订阅者 发布消息， 出发相应的监听回调。

  • 具体步骤如下。

    ​ 1、 对需要观察的数据对象进行 递归遍历， 包括子属性对象的属性，设置 set 和 get 特性方法。 当给这个对象的某个值赋值时， 会出发绑定的set 特性方法， 于是就能监听到数据变化。
    ​ 2、 用 complie 解析模板指令， 将模板中的变量替换成数据。然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者。 一旦数据有变动，就会收到通知，并更新视图。
    ​ 3、 Watcher 订阅者是 Observer 和 Complie 之间通信的桥梁， 主要功能如下。

  • 在自身实例化时向属性订阅器里面 添加自己。

  • 自身必须有一个update() 方法。

  • 在 dep.notice() 发布通知时， 能调用自身的update()方法， 并触发 Complie 中 绑定的会掉函数。
    4、 MVVM 是 数据绑定的入口， 整合了 Observe、 complie 和 Watcher三者，通过Observer 来监听自己的model 数据变化， 通过 Complie 来解析编译模板指令， 最终利用 Watcher 搭起 Observer 和 Complie 之间通信的桥梁，达到数据变化通知视图更新的效果。 利用视图交互， 变化更新数据 model 变更的双向绑定效果。

未完 待续。。。。