MVVM 的三大要素
响应式: vue 如何监听到 data 的每个属性变化?
什么是响应式
<div id="app">
<p>{{name}}</p>
<p>{{age}}</p>
</div>
var vm = new Vue({
el: "#app",
data: {
name: "hank",
age: "18"
}
});
思考
- 修改
data 属性后, vue 怎么立刻监听到 data 的属性修改
-
data 属性 怎么代理到 vue 上的, 即 vm.name 怎么能获取到 data 里的属性
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 的整个实现流程
- 解析模板成 render 函数
- 响应式开始监听
- 首次渲染, 显示页面, 且绑定依赖
- 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的时候我们也无需关心
- 避免不必要的重复渲染
