vue生命周期

123 阅读1分钟

image.png

生命周期分为三个阶段:初始化、更新、销毁

  • 初始化:beforeCreate、created、beforeMount、mounted
  • 更新:beforeUpdate、updated
  • 销毁:beforeDestory、destoryed

说明:

  1. beforeCreate:实例初始化之后,this指向创建的实例,不能访问到data、computed、watch、methods上的方法和数据,通常用于插件开发中执行一些初始化任务
  2. created:实例创建完成,可访问data、computed、watch、methods上的方法和数据。未挂载到DOM上,不能访问到el属性,ref属性内容为空数组,常用于获取异步数据
  3. beforeMount:挂载开始之前被调用,beforeMount之前,会找到对应的template,并编译成render函数
  4. mounted:初始化结束,dom已创建,可用于获取访问数据和dom元素,$ref可访问
  5. beforeUpdate:响应式数据更新时调用,发生在虚拟DOM打补丁之前,可用于获取更新前的各种状态
  6. updated:虚拟DOM重新渲染和打补丁之后调用,组件DOM已经更新,可执行依赖于DOM的操作。避免在这个钩子函数中操作数据,可能陷入死循环
  7. beforeDestory:实例销毁之前调用。这一步,实例仍然可用,this仍能获取到实例。常用于销毁定时器、解绑全局事件、销毁插件对象等操作
  8. destoryed:实例销毁之后调用。调用后,vue实例指示的所有东西都会解绑,所有的事件监听器会被移除,所以的子实例也会被销毁

准备工作:

  1. 下载代码: git clone github.com/vuejs/vue.g…
  2. 修改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,最终都是为了得到渲染函数。在源码中:

image.png

2、vue文件:/src/platforms/web/runtime/index.js

作用:指定patch方法,实现$mount

image.png

3、核心vue文件:/src/core/index.js

作用:定义全局API

image.png

4、构造函数:/src/core/instance/index.js

作用:定义构造函数vue

image.png

5、定义初始化方法:/src/core/instance/init.js

image.png

6、通知更新:/src/core/observer/index.js,vue批量异步更新策略

image.png