添加顺序是先子后父,所以对于同步渲染的子组件而言,mounted 钩子函数的执行顺序也是先子后父。
new Vue({
1.初始化 init()
2.挂载 $mount()
3.编译 compile()
4.render()
5.vnode
6.patch()
7.DOM
})
function init(){
1.合并配置 mergerOptions()
2.renderProxy 对渲染函数进行作用域代理
3.initLifeCycle 初始化生命周期
4.initEvents
5.initRender
6.调用beforeCreate
7.initInjections
8.initState 初始化props methods data computed watcher
9.initProvide
10.调用created
11.$mount
}
function $mount(){
1.有无render,没有的话讲template转化为render
2.mountComponent
3.实例化Watcher
4.调用beforeMount
5._render
}
function _render(){
1.通过createElement返回vNode
2.通过update将vNode更新为真实node 利用patch方法遍历父元素的children再最后一起insert,
3.调用mounted
}
new Watcher({
1.调用beforeUpdate
2.调用updated
})
1.组件的更新由父到子;因为父组件的创建过程是先于子的,所以 watcher 的创建也是先父后子,执行顺序也应该保持先父后子
双向绑定原理
props初始化
props 的初始化主要过程,就是遍历定义的 props 配置。
遍历的过程主要做两件事情:一个是调用 defineReactive 方法把每个 prop 对应的值变成响应式,可以通过 vm._props.xxx 访问到定义 props 中对应的属性。
对于 defineReactive 方法,我们稍后会介绍;另一个是通过 proxy 把 vm._props.xxx 的访问代理到 vm.xxx 上。
props初始化
data 的初始化主要过程也是做两件事,一个是对定义 data 函数返回对象的遍历,通过 proxy 把每一个值 vm._data.xxx 都代理到 vm.xxx 上;
另一个是调用 observe 方法观测整个 data 的变化,把 data 也变成响应式,可以通过 vm._data.xxx 访问到定义 data 返回函数中对应的属性。
proxy
Proxy就是通过Object.defineProperty把this.props.XXX和this.data.XXX代理到this.XXX上。
Observe
1.实例化Def
2.将自身实例添加到数据对象的__ob__上
3.判断是对象还是数组,对象调用defineReactive方法,数组调用observeArray
defineReactive
实例化Dep
通过Object.defineProperty 去给 obj 的属性 key 添加 getter 和 setter
在 get 函数中通过 dep.depend 做依赖收集
在 set 函数中通过 dep.notify 做派发更新
vue2.0源码解析自用
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 一直想写webpack的知识点,却发现webpack其实要将webpack说的具体内容还是挺多的。而且网上上一搜w...
- 前言 HackerNews是基于 HN 的官方 firebase API 、Vue 2.0 、vue-router...