您现在的位置是：主页 > news > 子页面的网站地址怎么做/焊工培训
子页面的网站地址怎么做/焊工培训
admin2025/6/4 20:54:40【news】
简介子页面的网站地址怎么做,焊工培训,企业app商城开发网站建设,电商网站开发人员配置生命周期和钩子函数-介绍 啥也不说先上图 图-1为 Vue 1.0 生命周期图,图-2为 Vue 2.0 生命周期图,图-3为Vue 1.0 和 Vue 2.0 钩子函数比较 重点看 Vue 2.0 生命周期和钩子函数-具体 <!DOCTYPE html> <html> <head><meta charset"utf-8"><…
生命周期和钩子函数-介绍
啥也不说先上图
图-1为 Vue 1.0 生命周期图,图-2为 Vue 2.0 生命周期图,图-3为Vue 1.0 和 Vue 2.0 钩子函数比较
重点看 Vue 2.0
生命周期和钩子函数-具体
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue生命周期测试</title><script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body><div id="app"><input type="text" name="message" v-model="message"><p>{{ message }}</p>
</div><script type="text/javascript">var app = new Vue({el: '#app',data: {message: "Hello World!"},beforeCreate: function () {console.group('beforeCreate 创建前状态===============》');console.log("%c%s", "color:red", "el : " + this.$el); //undefinedconsole.log("%c%s", "color:red", "data : " + this.$data); //undefinedconsole.log("%c%s", "color:red", "message: " + this.message);//undefined},created: function () {console.group('created 创建完毕状态===============》');console.log("%c%s", "color:red", "el : " + this.$el); //undefinedconsole.log("%c%s", "color:red", "data : " + this.$data); //已被初始化console.log("%c%s", "color:red", "message: " + this.message); //已被初始化},beforeMount: function () {console.group('beforeMount 挂载前状态===============》');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); //已被初始化},mounted: function () {console.group('mounted 挂载结束状态===============》');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); //已被初始化},beforeUpdate: function () {console.group('beforeUpdate 更新前状态===============》');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);},updated: function () {console.group('updated 更新完成状态===============》');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);},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>
</body>
</html>打开F12可以查看生命周期各个时期的钩子函数的状态,如下图
由上图知:
1.beforeCrete: 此时,$el和data都为undefined,没有初始化
2.created: 创建后data初始化了,而$el没有
3.brforeMount: 挂在之前,$el和data都初始化了
4.mounted: Vue实例挂载完成了
注意: beforeMount红色矩形框里是{{message}},mounted的红矩形框里是xuxiao is boy,说明挂载前$el的值为'虚拟'的元素节点,挂载后'虚拟'的Dom节点被真实的Dom节点替换
在输入框架改变值的时候：
由此可见,当data数据变化时只会触发update
Vue实例解耦(destroy)
在控制台里输入app.$destroy();
由图知:
执行完destroy操作后,data里的数据没有变化,但是Dom结构还存在,也就是Vue实例不再受控制了,完成了解耦
生命周期和钩子函数-总结
如下图这是把官方 Vue 2.0 生命周期的图例简化后的
生命周期钩子函数使用
beforecreate : 举个栗子：可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestory： 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容
