vue的生命周期函数介绍及使用方法简介
生命周期函数（上边为概念，下边有示例代码）生命周期函数 = 生命周期钩子 = 生命周期事件创建阶段：BeforeCreate、created、BeforeMount、mountedBeforeCreate ： data、methods 初始化之前调用created ： data、methods 成功初始化 调用BeforeMount ： 挂载到 div 之前调用mounted： 成功挂载之后调用（
·
生命周期函数
（上边为概念，下边有示例代码）
- 生命周期函数 = 生命周期钩子 = 生命周期事件
- 创建阶段：BeforeCreate、created、BeforeMount、mounted
（1） BeforeCreate ： data、methods 初始化之前调用
（2）created ： data、methods 成功初始化 调用
（3）BeforeMount ： 挂载到 div 之前调用
（4） mounted ： 成功挂载之后调用
（所以如果要通过某些插件操作页面上的DOM节点，最早要在 mounted 中进行）
（只要执行完了mounted，就表示整个 Vue 实例已经初始化完成了；此时已经从创建阶段，进入到了运行阶段）
- 运行阶段：beforeUpdate 和 updated
（1） beforeUpdate ： 还未同步
（2） updated ：执行的时候，页面和data数据已经保持同步了
（这俩事件，会根据 data 数据的变化，有选择性地触发 0 次到多次）
- 销毁阶段：beforeDestroy 和 destroyed
（1） beforeDestroy ： 实例身上所有的 data 和所有的methods 以及过滤器、指令等，都处于可用状态
（2） destroyed ： 上述都已经不可用
示例代码：
<html>
<head>
<meta charset="utf-8">
<title>生命周期</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p id="pbq">{{message}}</p>
<input type="button" value="改变" @click="change" >
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:"data中数据"
},
methods:{
change(){
this.message = 'no'
}
},
beforeCreate() {
console.log("beforeCreate-" + this.message)
},
created() {
console.log("created-" + this.message)
},
beforeMount() {
console.log("beforeMount-" + document.getElementById('pbq').textContent)
},
mounted() {
console.log("mounted-" + document.getElementById('pbq').textContent)
},
beforeUpdate() {
console.log("beforeUpdate Data中 -" + this.message)
console.log("beforeUpdate 页面中 -" + document.getElementById('pbq').textContent)
},
updated() {
console.log("updated Data中 -" + this.message)
console.log("updated 页面中 -" + document.getElementById('pbq').textContent)
}
})
</script>
</body>
</html>
运行结果如下：
点击改变后：
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)