前言
这是最近的碰到的那个 和响应式相关的问题 特定的操作之后响应式对象不“响应“了 引起的一系列的文章
主要记录的是 vue 的相关实现机制
呵呵 理解本文需要 vue 的使用基础, js 的使用基础
测试用例
测试用例如下, 一个简单的 按钮事件的触发
问题的调试
这里以一个组件 来看一下 整个过程
beforeCreate – create - beforeMount - mounted - beforeUpdate - updated - beforeDestroy - destroyed
在根据 vnode 实例化 VueComponent, 创建页面 dom 元素的时候, 会创建给定的 VueComponent, 这里我们可以看到很多东西
这里我们仅仅关心在 init 的时候调用了 beforeCreate 回调
同样是在初始化的时候, 第二个回调是 create
这两个阶段的流程大致如下
initLifecycle 主要是初始化父子组件关系, 初始化root组件
initEvents 主要是继承父组件的相关事件监听
initRender 主要是初始化 vm._c, vm.$createElement, vm.$slots
initInjections 主要是注册组件中定义的 injections 相关属性
initState 主要是初始化 props, methods, data, computed, watch, 字段封装代理什么的, 在这里面
接着是 beforeMount, mounted 相关
是在 init 之后主动触发的
先调用的 beforeMount 回调
接着 render 生成整个 vnode 树
接着 update 递归创建子组件, dom 元素 等等
接着 调用 mounted 回调
这里调用是 beforeUpdate 的地方, 注册是在 初始化 VueComponent 的地方注册的
调用的地方是在 Watcher 处理开头, 在 Watcher.run 之前
这里调用是 updated 的地方, 调用的地方是在 Watcher 处理末尾, 在 Watcher.run 之后
其他的生命周期函数 beforeDestroy, destroyed 不再赘述
这部分内容可以 结合官方文档 看一下
完
