Vue的整个实现流程源码解读???(总结点)
解析模板成render函数
<template></template> --->>> render 函数
with函数的使用
模板中的所有信息都被render函数包含
模板中用到的data中的属性,都变成了JS变量
模板中的v-model v-for v-on都变成了JS逻辑
render函数返回vnode
响应式开始监听数据
Object.defineProperty
将data的属性代理到vm上
with(vm) {
}
首次渲染,显示页面,且绑定依赖
初次渲染,执行updateComponent, 执行vm._render()
执行render函数,会访问到vm.list和vm.title属性
会被响应式的get方法监听到(Object.defineProperty)
Object.defineProperty(mv, key, {
get: function() {
return data[key];
}
})
执行updateComponent, 会执行vdom的patch方法
patch将vnode渲染成DOM,初次渲染完成
- 为何要监听get, 直接监听set不行吗?
data中有很多属性,有些会被用到,有些可能不被用到
被用到的会走到get, 不被用到的不会走到get
未走到get中的属性,set的时候我们也无需关心
避免不必要的重复渲染(关键点)
vm._update(vnode) {
const prevNode = vm._vnode;
vm._vnode = vnode;
if (!prevNode) {
// 首次渲染的时候
vm.$el = vm.__patch__(vm.$el, vnode);
}
else{
vm.$el = vm.__patch__(prevNode, vnode);
}
}
// 开始更新vue组件(修改data的属性的时候,Object.defineProperty)
function updateComponent() {
vm._update(vm._render());
}
data属性变化,触发rerender函数
Object.defineProperty(mv, key, {
set: function(newVal) {
data[key] = newVal;
// 开始执行
updateComponnet()
}
})
修改属性,被响应式的set监听到
set中执行updateComponnet
updateComponent重新执行vm._render()
生成的vnode和preVnode, 通过patch进行对比
渲染到html中去