Vue 生命周期

MVVM 的三大要素

响应式: vue 如何监听到 data 的每个属性变化?

什么是响应式

• 演示

  
{{name}}
  
{{age}}

var vm = new Vue({
  el: "#app",
  data: {
    name: "hank",
    age: "18"
  }
});

思考

• 修改 data 属性后, vue 怎么立刻监听到 data 的属性修改
• data 属性 怎么代理到 vue 上的, 即 vm.name 怎么能获取到 data 里的属性

Object.defineProperty

• MDN Object.defineProperty

var obj = {};

(function(obj) {
  // 定义一个内部变量 , 外部无法访问
  var _name = "hank";

  // 使用 defindProperty 定义属性
  Object.defineProperty(obj, "name", {
    // 当 obj.name 获取的时候调取 get 方法
    get: function() {
      console.log("get", _name); // 监听
      return _name;
    },
    // 当 obj.name 设置的时候调取 set 方法
    set: function(newVal) {
      console.log("set", newVal); // 监听
      _name = newVal;
    }
  });
}(obj)

console.log(obj.name)
// console 先打印 => gethank
// console 然后打印 obj.name 的值 => hank

obj.name = 'chang'
// console 先打印 => setchang
// 然后 obj.name 的值才被更改为 chang

模拟

var vm = {};
var data = {
  name: "hank",
  age: 18
};

// 把遍历要用到的变量先声明, 让代码更直观.
var key;
for (key in data) {
  // 闭包的使用, 绑定 key 的值,
  (function(key) {
    Object.defineProperty(vm, key, {
      get: function() {
        console.log("get", data[key]); // 监听
        return data[key];
      },
      // 监听 在这里可以做操作 比如修改DOM的内容, 实现vue的效果
      set: function(newVal) {
        console.log("set", newVal);
        data[key] = newVal;
      }
    });
  })(key);
}

模板引擎: vue 的模板如何被解析, 指令如何处理

• 模板是什么
  • 模板的本质就是 字符串
  • 有逻辑的
  • 最终转化为一个 js 函数 (render 函数)

渲染: vue 的模板被渲染成 html, 以及渲染过程

vue 的整个实现流程

1. 解析模板成 render 函数
2. 响应式开始监听
3. 首次渲染, 显示页面, 且绑定依赖
4. data 属性变化, 触发 rerender

解析模板成 render 函数

• 模板中所有的信息都被 render函数包含
• 模板中用到的 data 中的属性, 都被变成了 js变量
• 模板中的 v-model v-for v-on 都变成了 js逻辑
• render 函数返回 vnode

响应式开始监听

• Object.defindProperty
• 将 data 属性代理到 vue 实例上

首次渲染, 显示页面, 且绑定依赖

• 初次渲染, 执行 updateComponent, 执行 vm._render()
• 执行 render 函数, 会访问到 vm.list 和 vm.title
• 会被响应式的 get 方法监听到
• 执行 updateComponent, 会走到 vdom 的 patch 方法
• patch 将 vnode 渲染成 DOM, 初次渲染完成

为什么监听 get

• data 中有很多属性, 有些被用到, 有些可能不会被用到
• 未被用到的属性, set的时候我们也无需关心
• 避免不必要的重复渲染