VUE生命周期

最新推荐文章于 2024-09-13 14:34:15 发布

小孟学Java

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量865

点赞数 9

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_67929601/article/details/142030472

版权

Vue生命周期的介绍:

创建，使用，更新数据，销毁

生命周期的作用:在Vue执行的过程中，可以根据不同的生命周期，让程序员在指定的时间去执行某些额外的操作。

生命周期分为:四个阶段8个函数

vue2:

vue2：
[
'beforeCreate', # 对象创建好了，但还没有初始化
'created', # 对象已经初始化完成
'beforeMount', # vue实例已经可以使用，但是vue中的数据还没有挂载到页面上（VDom）
'mounted', # vue数据已经挂载到页面上
'beforeUpdate', # vue监听到数据发生变化，vue内部正在处理数据，页面还没有处理完成
'updated', # 更新的数据已经与页面处理完成
'beforeDestroy', # vue实例即将被销毁
'destroyed', # vue实例被销毁
'activated',
'deactivated',
'errorCaptured',
'serverPrefetch',
'renderTracked',
'renderTriggered'
]

vue3:

vue3：
const {
// lifecycle
created,
beforeMount,
mounted,
beforeUpdate,
updated,
activated,
deactivated,
beforeDestroy,
beforeUnmount,(销毁前)
destroyed,
unmounted,(销毁后)
render,
renderTracked,
renderTriggered,
errorCaptured,
serverPrefetch
} = options;

<body>

    <!-- 使用vue开发前端页面，必须在页面给出vue所控制（管理）的区域 -->
    <div id="app">
        <p>{{msg}}</p>
        <p>{{num}}</p>
        <button @click="num++">++++++++</button>
    </div>
    <script src="./js/vue3.js"></script>

    <script>
        // 1. 创建vue实例
        const app = Vue.createApp({
            data() {
                return {
                    msg: "你好",
                    num: 10
                }
            },
            methods: {},
            watch: {},
            computed: {},
            // 生命周期函数
            // vue实例创建出来了，但是还没有初始化
            beforeCreate() {
                console.log("beforeCreate");
            },
            // vue对象创建完成，并已经初始化，接下来vue需要在内存中开始创建对应的html虚拟模版（虚拟dom）
            created() {
                console.log("created");
            },
            // vue已经将虚拟dom创建完成，在内存中vue的数据与dom节点已经绑定
            // 但是html页面并未真正渲染（挂载）
            beforeMount() {
                console.log("beforeMount");
            },
            // 将虚拟dom渲染到页面，并且渲染已经结束
            mounted() {
                console.log("mounted");
            },
            // vue检测到有数据更新，开始在内存中进行数据处理（虚拟dom处理，diff算法）
            beforeUpdate() {
                console.log("beforeUpdate");
            },
            // vue将更新变化的数据渲染到真实页面上
            updated() {
                console.log("updated");
            },
            // vue的实力即将被销毁，但还没有销毁
            beforeDestroy() {
                console.log("beforeDestroy");
            },
            // vue实例已经被销毁
            destroyed() {
                console.log("destroyed");
            },
            // vue3中销毁阶段的函数变化
            beforeUnmount() { },
            unmountd() { },

        });
        // 2、将vue与页面绑定
        app.mount("#app");
    </script>
</body>