Vue3-生命周期函数

最新推荐文章于 2023-12-07 19:12:57 发布

零OO

最新推荐文章于 2023-12-07 19:12:57 发布

阅读量2.5k

点赞数 1

分类专栏：前端文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_39111074/article/details/120545478

版权

前端专栏收录该内容

220 篇文章 7 订阅

订阅专栏

生命周期函数：在某一时刻，会自动执行的函数

    共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>

页面打印效果:

零OO

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue3-生命周期函数

生命周期函数：在某一时刻，会自动执行的函数共8个： 1. 实例生成之前会自动执行的函数- - -beforeCreate() 2. 实例生成之后会自动执行的函数- - -created() 3. 组件内容被渲染到页面之前自动执行的函数- - -beforeMount() 4. 组件内容被渲染到页面之后自动执行的函数- - -mounted() 5. 数据发生变化时会立即自动执行的函数- - -beforeUpdate() 6. 数据发生变化后，页面重
复制链接

扫一扫