Vue 生命周期
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
先看一波代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>vue生命周期学习</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Vue的生命周期',
},
beforeCreate: function() {
console.group('------beforeCreate创建前状态------');
console.log('%c%s', 'color:red', 'el : ' + this.$el); //undefined
console.log('%c%s', 'color:red', 'data : ' + this.$data); //undefined
console.log('%c%s', 'color:red', 'message: ' + this.message); //undefined
},
created: function() {
console.group('------created创建完毕状态------');
console.log('%c%s', 'color:red', 'el : ' + this.$el); // undefined
// 这里使用 es6 的扩展预算符, 重新建立一个变量, 防止chrome控制台因为引用关系, 而打印错误`引用`的后期变动数据
console.log('%c%s', 'color:red', 'data : ', { ...this.$data }); // 已经初始化 {message: "Vue的生命周期"}
console.log('%c%s', 'color:red', 'message: ' + this.message); // 已经初始化 'Vue的生命周'
},
beforeMount: function() {
console.group('------beforeMount挂载前状态------');
console.log('%c%s', 'color:red', 'el : ', this.$el); // 已被初始化 div#app>h1{{{message}}}
console.log('%c%s', 'color:red', 'data : ', { ...this.$data }); // 已经初始化 {message: "Vue的生命周期"}
console.log('%c%s', 'color:red', 'message: ' + this.message); // 'Vue的生命周期'
},
mounted: function() {
console.group('------mounted 挂载结束状态------');
console.log('%c%s', 'color:red', 'el : ', this.$el); //已被初始化 div>h2{Vue的生命周期}
console.log('%c%s', 'color:red', 'data : ' + { ...this.$data }); // 已被初始化
console.log('%c%s', 'color:red', 'message: ' + this.message); // Vue的生命周期
},
beforeUpdate: function() {
console.group('beforeUpdate 更新前状态===============》');
console.log('%c%s', 'color:red', 'el : ' + this.$el.innerHTML);
console.log(this.$el);
console.log('%c%s', 'color:red', 'data : ' + this.$data);
console.log('%c%s', 'color:red', 'message: ' + this.message);
},
updated: function() {
console.group('updated 更新完成状态===============》');
console.log('%c%s', 'color:red', 'el : ' + this.$el.innerHTML);
console.log(this.$el);
console.log('%c%s', 'color:red', 'data : ' + this.$data);
console.log('%c%s', 'color:red', 'message: ' + this.message);
},
beforeDestroy: function() {
console.group('beforeDestroy 销毁前状态===============》');
console.log('%c%s', 'color:red', 'el : ' + this.$el);
console.log(this.$el);
console.log('%c%s', 'color:red', 'data : ' + this.$data);
console.log('%c%s', 'color:red', 'message: ' + this.message);
},
destroyed: function() {
console.group('destroyed 销毁完成状态===============》');
console.log('%c%s', 'color:red', 'el : ' + this.$el);
console.log(this.$el);
console.log('%c%s', 'color:red', 'data : ' + this.$data);
console.log('%c%s', 'color:red', 'message: ' + this.message);
},
});
</script>
</html>
分析运行结果
-
在 beforeCreate 和 created 钩子函数之间的生命周期
- 在这个生命周期之间，进行初始化事件，进行数据的观测，可以看到在 created 的时候数据已经和 data 属性进行绑定（放在 data 中的属性当值发生改变的同时，视图也会改变）。
- 注意看下：此时还是没有 el 选项
-
created 钩子函数和 beforeMount 间的生命周期
-
在这个阶段发生的事情挺多, 首先会判断对象是否有
el选项。如果有的话就继续向下编译，如果没有 el 选项，则停止编译，也就意味着停止了生命周期，直到在该 vue 实例上调用 vm.$mount(el)。此时注释掉代码中:// 将上述代码中的下一行注释掉 // el: '#app', -
此时运行结果如下所示, 到 created 的时候就停止了
无el选项的时候生命周期 -
在控制台中输入
vm.$mount(document.getElementById('app'));发现继续往下运行, 结果如下
-
我们往下看，template 参数选项的有无对生命周期的影响。
如果 vue 实例对象中有 template 参数选项，则将其作为模板编译成 render 函数。
如果没有 template 选项，则将外部 HTML 作为模板编译。
-
可以看到 template 中的模板优先级要高于 outer HTML 的优先级。
修改代码如下, 在 HTML 结构中增加了一串 html，在 vue 对象中增加了 template 选项：<div id="app"> <h1>外部HTML中内容{{message}}</h1> </div> <script> var vm = new Vue({ el: '#app', //在vue配置项中添加下面内容 template: "<h1>内部template HTML中内容 {{message}}</h1>", data: { message: 'Vue的生命周期' } </script> -
执行后的结果可以看到在页面中显示的是 template 中的内容
template 配置项的使用这也是为什么对于
el的判断要在 template 之前了~是因为 vue 需要通过 el 配置项 找到对应的 outerHTML 使用 template 里面的内容来进行替换。 -
在 vue 对象中还有一个 render 函数，它是以 createElement 作为参数，然后做渲染操作，而且我们可以直接嵌入 JSX. 嵌入 JSX 应该要引入 babel-plugin-transform-vue-jsx 这个插件或者其他 babel 转义 jsx 的插件
new Vue({ el: '#app', template: '<h2>template {{message}}</h2>', render: function(createElement) { return createElement('h1', 'createElement Function'); }, });
所以综合排名优先级：render 函数选项 > template 选项 > outer HTML.
-
-
beforeMount 和 mounted 钩子函数间的生命周期
- 通过上述图片, 可以看到 beforeMount 时的 el, 还是之前 dom 中没有被替换数据之间的原始模板, 在 mounted 之前 h1 中还是通过{{message}}进行占位的，因为此时还有挂在到页面上，还是 js 中的虚拟 DOM 形式存在的。在 mounted 之后可以看到 h1 中的内容发生了变化。
-
beforeUpdate 和 updated 测试
当 vue 发现 data 中的数据发生了改变，会触发对应组件的重新渲染，先后调用 beforeUpdate 和 updated 钩子函数。
-
在控制台中输入
vm.message = '触发组件更新';
组件更新测试通过对 el 内容的对比, 可以发现变化前后的 dom 变化, 对于数据message的变化, 我们可以通过$watch 来进行监控
-
beforeDestroy 和 destroyed 钩子函数间的生命周期
- beforeDestroy 钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
- destroyed 钩子函数在 Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
