vue 中如何解析模板
- 模板:字符串,有逻辑,嵌入 JS 变量……
- 模板必须转换为 JS 代码(有逻辑、渲染 html、JS 变量)
- render函数是什么样子的
- render 函数执行是返回 vnode
- updateComponent
vue 的整个实现流程
第一步:解析模板成 render 函数
- with 的用法
- 模板中的所有信息都被 render 函数包含
- 模板中用到的 data 中的属性,都变成了 JS 变量
- 模板中的 v-model v-for v-on 都变成了 JS 逻辑
- render 函数返回 vnode
第二步:响应式开始监听
- Object.defineProperty
- 将 data 的属性代理到 vm 上
第三步:首次渲染,显示页面,且绑定依赖
- 初次渲染,执行 updateComponent,执行 vm._render()
- 执行 render 函数,会访问到 vm.list vm.title
- 会被响应式的 get 方法监听到(下面会讲)
- 执行 updateComponent ,会走到 vdom 的 patch 方法
- patch 将 vnode 渲染成 DOM ,初次渲染完成
为何要监听 get ,直接监听 set 不行吗?
data 中有很多属性,有些被用到,有些可能不被用到
被用到的会走到 get ,不被用到的不会走到 get
未走到 get 中的属性,set 的时候我们也无需关心
避免不必要的重复渲染
第四步:data 属性变化,触发 rerender
- 修改属性,被响应式的 set 监听到
- set 中执行 updateComponent
- updateComponent 重新执行
vm._render() 生成的 vnode 和 prevVnode ,通过 patch 进行对比
渲染到 html 中