Vue3-生命周期函数
生命周期函数:在某一时刻,会自动执行的函数共8个:1. 实例生成之前会自动执行的函数- - -beforeCreate()2. 实例生成之后会自动执行的函数- - -created()3. 组件内容被渲染到页面之前自动执行的函数- - -beforeMount()4. 组件内容被渲染到页面之后自动执行的函数- - -mounted()5. 数据发生变化时会立即自动执行的函数- - -beforeU
·
生命周期函数:在某一时刻,会自动执行的函数
共8个:
1. 实例生成之前会自动执行的函数- - -beforeCreate()
2. 实例生成之后会自动执行的函数- - -created()
3. 组件内容被渲染到页面之前自动执行的函数- - -beforeMount()
4. 组件内容被渲染到页面之后自动执行的函数- - -mounted()
5. 数据发生变化时会立即自动执行的函数- - -beforeUpdate()
6. 数据发生变化后,页面重新渲染后,会自动执行的函数- - -updated()
7. 当 Vue 应用失效时,会自动执行的函数- - -beforeUnmount()
8. 当 Vue 应用失效时,且 dom 完全销毁之后,自动执行的函数- - -unmounted()
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生命周期函数</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
/*
生命周期函数:在某一时刻,会自动执行的函数
8个:
1. 实例生成之前会自动执行的函数- - -beforeCreate()
2. 实例生成之后会自动执行的函数- - -created()
3. 组件内容被渲染到页面之前自动执行的函数- - -beforeMount()
4. 组件内容被渲染到页面之后自动执行的函数- - -mounted()
5. 数据发生变化时会立即自动执行的函数- - -beforeUpdate()
6. 数据发生变化后,页面重新渲染后,会自动执行的函数- - -updated()
7. 当 Vue 应用失效时,会自动执行的函数- - -beforeUnmount()
8. 当 Vue 应用失效时,且 dom 完全销毁之后,自动执行的函数- - -unmounted()
*/
// 创建vue实例
const app = Vue.createApp({
// 1. 实例生成之前会自动执行的函数
beforeCreate() {
console.log('beforeCreate');
},
// 2. 实例生成之后会自动执行的函数
created() {
console.log('created');
},
// data里面定义了组件要展示的数据,数据层- - -model
data() {
return {
message: 'hello world'
}
},
// 3. 组件内容被渲染到页面之前自动执行的函数
beforeMount() {
console.log(document.getElementById('root').innerHTML, 'beforeMount');
},
// 4. 组件内容被渲染到页面之后自动执行的函数
mounted() {
console.log(document.getElementById('root').innerHTML, 'mounted');
},
// 5. 数据发生变化时会立即自动执行的函数
beforeUpdate() {
console.log(document.getElementById('root').innerHTML, 'beforeUpdate');
},
// 6. 数据发生变化后,页面重新渲染后,会自动执行的函数
updated() {
console.log(document.getElementById('root').innerHTML, 'updated');
},
// 7. 当 Vue 应用失效时,会自动执行的函数
beforeUnmount() {
console.log(document.getElementById('root').innerHTML, 'beforeUnmount');
},
// 8. 当 Vue 应用失效时,且 dom 完全销毁之后,自动执行的函数
unmounted() {
console.log(document.getElementById('root').innerHTML, 'unmounted');
},
// 视图模板---view
template: '<div>{{message}}</div>'
});
// 将实例挂载到具体的dom节点,vm 是 数据-视图 连接层
const vm = app.mount('#root');
// 修改message值,注意调用data里面的数据,要在data前加上 $ 符号
vm.$data.message = '你好呀!';
// app.unmount('#root');
</script>
</html>
页面打印效果:
更多推荐
已为社区贡献10条内容
所有评论(0)