Vue学习笔记——生命周期

最新推荐文章于 2022-12-26 15:05:06 发布

淡忘～雨季

最新推荐文章于 2022-12-26 15:05:06 发布

阅读量166

点赞数

分类专栏： Web前端学习文章标签： vue.js reactjs node.js javascript html5

本文链接：https://blog.csdn.net/weixin_43900407/article/details/105507997

版权

Web前端学习专栏收录该内容

33 篇文章 1 订阅

订阅专栏

官网图解：
在这里插入图片描述
初始化Vue实例的四个函数

beforeCreated()： Vue第一个生命周期函数,实例创建完之后,会执行这个函数。
注意：执行beforeCreate()周期函数的时候，data和methods对象中的数据还没有初始化,所以此时执行data中的数据结果就是undefined，执行methods中函数结果就会显示这不是一个function
created：Vue第二个生命周期函数，在created中data和methods都已经初始化好了，此时调用就会显示对应的结果，如果需要调用data中的数据和methods中的函数，最早只能在created()中操作。
beforeMount()：Vue第三个生命周期函数表示模板已经在内存中创建完成，但是还没有将模板渲染到页面当中，此时输出的结果只是模板字符串
mounted：Vue第四个生命周期函数，表示在内存中已经存在模板，并且已经挂载到页面中，用户可以看到渲染好的页面。
mounted是初始化Vue对象的最后一个函数，执行完mounted就表示实例已经创建好了。
运行阶段 Vue的两个函数

运行阶段Vue的两个函数 beforeUpdate update，这两个函数会根据data中数据的改变，有选择的触发0次或者n次。
beforeUpdate()：data中数据发生了更新，但是最新的数据没有渲染到DOM树当中。
updated()：当Vue执行到update()中的时候内存中最新的数据已经渲染到真正的页面当中，也就是完成了data(Model层)到view(视图层)，此时DOM树中的数据和data中的数据保持一致。

销毁阶段 Vue的两个函数 beforeDestroy() destroyed()。

beforeDestroy()：当执行到beforeDestroy()函数的时候，Vue实例已经从运行阶段到销毁阶段，实际上实例的data数据，methods方法还有过滤器，指令等等，都处于可用状态。
destroyed()：执行到destroyed()函数的时候，组件已经被销毁了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue生命周期分析</title>
    <script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="点击" @click = "msg = 'No'">
        <h3 id="h3">{{ msg }}</h3>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data: {
                msg : 'Hello Vue.js'
            },
            methods: {
                show() {
                    console.log('执行了show方法');
                }
            },
            beforeCreate() {
                // Vue第一个生命周期函数 实例创建完之后 会执行这个函数
                // 注意:执行beforeCreate()周期函数的时候，data和methods对象中的数据还有初始化
                // console.log('this.msg ',this.msg);
                // this.show();
                // 运行结果 this.msg undefined   show()不是一个function
            },
            created() {
                // Vue第二个生命周期函数
                // 在created中data和methods都已经初始化好了
                console.log(this.msg);
                this.show();
                // 如果需要调用data中的数据和methods中的函数 最早 只能在created()中操作
            },
            beforeMount() {
                // Vue第三个生命周期函数  表示模板已经在内存中创建完成，但是还没有将模板渲染到页面当中
                console.log(document.getElementById('h3').innerText);
// 结果是输出模板字符串 {{ msg }} 因为页面中的元素还没有被真正替换过来，尚未真正挂载的页面，还只是之前的模板字符串
            },
            mounted() {
                // Vue第四个生命周期函数  表示在内存中已经存在模板，并且已经挂载到页面中，用户可以看到渲染好的页面
                console.log(document.getElementById('h3').innerText);
                // mounted是Vue生命周期的最后一个函数，执行完mounted就表示实例已经创建好了
            },
            // 运行阶段Vue的两个函数 beforeUpdate  update，这两个函数会根据data中数据的改变，有选择的触发0次或者多次
            beforeUpdate() {
                // 当data中的数据发生改变的时候，才会执行beforeUpdate
                console.log('---------beforeUpdate----------');
                console.log('data中的数据：' + this.msg);
                console.log('DOM中的数据：' + document.getElementById('h3').innerText);
                // 在beforeUpdate()函数中，data中数据发生了更新，但是最新的数据没有渲染到DOM树当中去
                // 运行结果：data中数据：No  DOM中的数据 Hello Vue.js  
            },
            updated() {
                // 当Vue执行到update()中的时候内存中最新的数据已经渲染到真正的页面当中，也就是完成了data(Model层)到view(视图层)
                console.log('---------updated测试------------');
                console.log('data中的数据：' + this.msg);
                console.log('DOM中的数据：' + document.getElementById('h3').innerText);
            },
            // 销毁阶段的两个函数 beforeDestroy()  destroyed()
            beforeDestroy() {
                // 执行到beforeDestroy()函数的时候，Vue实例已经从运行阶段到销毁阶段，当执行到beforeDestroy()函数的时候，实际上实例的data数据，methods方法还有过滤器，指令等等，都处于可用状态
            },
            destroyed() {
                // 执行到destroyed()函数的时候，组件已经被销毁了
            }
        });
    </script>
</body>
</html>