huoxiangdong / Blog

学习记录

0 stars 0 forks source link

Vue #4

Open huoxiangdong opened 6 years ago

huoxiangdong commented 6 years ago


data --> Object.defineProperty --> getter/setter -->Observer -->setter被调用 -->通知变化-->watcher --> 

- vm(实例初始化阶段) data内 数据(model)是一个js对象 -- copy给getter/setter 
-  hash 值 (带 #)
- `Vue.extend()` 构造组件对象，生成组件
- `props : ['name']` 接收父组件信息，`{propsData: {name : 'dear_mr'}}` 传递参数
- `$refs` 是引用值

huoxiangdong commented 6 years ago

vue渲染-->html是交由reander函数处理的
req --> component -> render -> html -> 插入

huoxiangdong commented 6 years ago

渲染过程

入口 config.js

-> /src/entries/web-runtime-with-compiler.js
--> /src/core/instance/index.js

initMixin(Vue)  //初始化的入口，各种初始化工作

stateMixin(Vue) //数据绑定的核心方法，包括常用的$watch方法

eventsMixin(Vue) //事件的核心方法，包括常用的$on，$off，$emit方法

lifecycleMixin(Vue) //生命周期的核心方法

renderMixin(Vue) //渲染的核心方法，用来生成render函数以及VNode

render函数

vm.$(vm.options.el)
$mount -> /src/entries/web-runtime-with-compiler.js
1.render() 2. template 3. el --> render()
template 、 el --> 最终生成的render函数是由Vue通过AST解析优化得到的
render() --> 返回VNode对象: Virtual DOM
VNode -> DOM Diff -> createElm -> 生成DOM节点

huoxiangdong commented 6 years ago

porps验证父组件 -> 属性 test = 1 -> this.propData -> 验证

huoxiangdong commented 6 years ago

vnode ?? -> vm._render -> vm.$options.render -> entry-runtime-with-compiler -> _update

以组件为单位，进行patch
vm.patch -> patch.js