vue生命周期钩子函数详解（vue生命周期钩子函数）
导读：钩子函数 说明 beforeCreate 在实例初始化之后，数据观测和watch/event事件配置之前被调用 created 在实例创建完成后被立即调用，在这一步，实例已经完成数据观测、属性和方法的运算，以及watch/event事...
钩子函数
说明
beforeCreate
在实例初始化之后 ，数据观测和watch/event事件配置之前被调用
created
在实例创建完成后被立即调用 ，在这一步 ，实例已经完成数据观测 、属性和方法的运算 ，以及watch/event事件回调 。挂载阶段还未开始 ，$el属性尚不可用 。多用于初始化数据或方法
mounted
实例被挂载后调用 ，这时el被新创建的vm.\(el替换 。如果实例挂载到了一个文档内的元素 ，当mounted被调用时 ，vm.\)el也在文档内 。在模板渲染成html后使用（初始化页面完成后 ，再对dom节点进行一些需要的操作）
beforeUpdate
数据更新时调用 。适合在更新前访问现有的DOM ，比如手动移除已添加的事件监听器
updated
数据修改会导致虚拟DOM重新渲染 ，在渲染后调用
activated
被keep-alive缓存的组件激活时调用
deactivated
被keep-alive缓存的组件停用时调用
beforeDestroy
实例销毁之前调用 ，在这一步 ，实例仍然可用
destroyed
实例销毁后调用 。该钩子被调用后 ，对应vue实例的所有指令都被解绑 ，所有的事件监听器被移除 ，所有的子实例也都被销毁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>生命周期钩子函数</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序
const vm = Vue.createApp({
data(){
return{
msg: 白日依山尽 ，黄河入海流
}
},
beforeCreate(){
console.log(beforeCreate);
},
created(){
console.log(created);
},
beforeMount(){
console.log(beforeMount);
},
mounted(){
console.log(mounted);
},
beforeUpdate(){
console.log(beforeUpdate);
},
updated(){
console.log(updated);
}
}).mount(#app);
setTimeout(function(){
vm.msg = 无边落木萧萧下 ，不尽长江滚滚来;
},4000);
</script>
</body>
</html>
运行以上代码 ，可以在网页控制台看到内容改变前打印了前四个函数 ，之后内容改变之后又打印了最后两个函数 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！