生命周期分为三个阶段:初始化、更新、销毁
- 初始化:beforeCreate、created、beforeMount、mounted
- 更新:beforeUpdate、updated
- 销毁:beforeDestory、destoryed
说明:
- beforeCreate:实例初始化之后,this指向创建的实例,不能访问到data、computed、watch、methods上的方法和数据,通常用于插件开发中执行一些初始化任务
- created:实例创建完成,可访问data、computed、watch、methods上的方法和数据。未挂载到DOM上,不能访问到el属性,ref属性内容为空数组,常用于获取异步数据
- beforeMount:挂载开始之前被调用,beforeMount之前,会找到对应的template,并编译成render函数
- mounted:初始化结束,dom已创建,可用于获取访问数据和dom元素,$ref可访问
- beforeUpdate:响应式数据更新时调用,发生在虚拟DOM打补丁之前,可用于获取更新前的各种状态
- updated:虚拟DOM重新渲染和打补丁之后调用,组件DOM已经更新,可执行依赖于DOM的操作。避免在这个钩子函数中操作数据,可能陷入死循环
- beforeDestory:实例销毁之前调用。这一步,实例仍然可用,this仍能获取到实例。常用于销毁定时器、解绑全局事件、销毁插件对象等操作
- destoryed:实例销毁之后调用。调用后,vue实例指示的所有东西都会解绑,所有的事件监听器会被移除,所以的子实例也会被销毁
准备工作:
- 下载代码: git clone github.com/vuejs/vue.g…
- 修改package.json文件,添加--sourcemap:"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev"
几个重要的文件
1、入口文件:/src/platforms/web/entry-runtime-with-compiler.js
作用:覆盖$mount,执行模版解析和编译
当render、template、el同时存在于代码中时,优先级:render > template > el。无论使用template还是el,最终都是为了得到渲染函数。在源码中:
2、vue文件:/src/platforms/web/runtime/index.js
作用:指定patch方法,实现$mount
3、核心vue文件:/src/core/index.js
作用:定义全局API
4、构造函数:/src/core/instance/index.js
作用:定义构造函数vue
5、定义初始化方法:/src/core/instance/init.js
6、通知更新:/src/core/observer/index.js,vue批量异步更新策略