Vue 的生命周期

最新推荐文章于 2024-09-30 16:19:08 发布

hhhqzh

最新推荐文章于 2024-09-30 16:19:08 发布

阅读量132

点赞数

文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/weixin_41018377/article/details/120024606

版权

每个 Vue 实例在被创建时都要经过一系列的初始化过程。

Vue 中所有生命周期钩子函数自动绑定 this 上下文到实例中，因此可以在函数中访问数据，对属性和方法进行运算。这意味着生命周期函数不能使用箭头函数来定义。（箭头函数绑定了父上下文，因此 this 与 Vue 实例不同）。

阶段一：Vue 实例创建阶段

beforCreated

Vue 实例在内存中刚被创建，this 变量还不能使用，数据对象（data）和方法（methods）未初始化，watcher 中的事件都不能获得到。

created

实例已经在内存中创建好，数据和方法已经初始化完成，但是模板还未编译，页面还是没有内容，还不能对 dom 节点进行操作（此时访问 this.$el 和 this.$refs.xxx 都是 undefined）。

beforeMounted

找到对应的 template 模板，编译成 render 函数，转换成虚拟 dom，此时模板已经编译完成，数据未挂载到页面，也就是说在这个阶段你可以看到标签间的双花括号，数据还未渲染到页面。

render : h=>h(App) 在 beforeMounte 之后和 mounted 之前，还有渲染 render 函数，它的作用是把模板渲染成虚拟 dom。

mounted

模板编译好了，虚拟 dom 渲染成真正的 dom 标签，数据渲染到页面，此时 Vue 实例已经创建完毕，如果没有其他操作的话，Vue 实例会静静的躺在内存中，一动不动。

一般会在 mounted 中来渲染从后端获取的数据。(页面初始化时，如果有操作 dom 的事件一般也会放在 mounted 钩子函数中。

阶段二：Vue 实例运行阶段

beforeUpdate

数据依赖改变或者用 $forceUpdate 强制刷新时，对象 data 中的数据已经更改（虚拟 dom 已经重新渲染），但是此时还未开始渲染 dom，页面中的值未改变。

update

此时 data 中的数据和页面更新完毕，页面已经被重新渲染。在实际开发中，一般会用监听器 watch 来代替上边 2 个方法，因为 watch 会知道是哪一个数据变化。

阶段三：Vue 实例销毁阶段

beforeDestory

实例销毁前使用，在此刻实例还是可用的。

destoryed

Vue 实例被销毁，观察者、子组件、事件监听被清除（页面数据不会消失，只不过是响应式无效了）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app" ref="app">
        {{ name }}
    </div>
</body>
    <script>
        let vm=new Vue({
            el:"#app",
            data:{
                name:"liuting",
            },
            beforeCreate(){
                console.log("创建前：");
                console.log(this.$el);
                console.log(this.$data);
            },
            created(){
                console.log("创建完成：");
                console.log(this.$el);
                console.log(this.$data);
            },
            beforeMount(){
                console.log("挂载前：");
                console.log(this.$el);
                console.log(this.$data);
            },
            mounted(){
                console.log("挂载完成：");
                console.log(this.$el);
                console.log(this.$data);
            },
            beforeUpdate(){
                console.log('=即将更新渲染=');
                let name = this.$refs.app.innerHTML;
                console.log('name:'+name);
            },
            updated(){
                console.log('==更新成功==');
                let name = this.$refs.app.innerHTML;
                console.log('name:'+name);
            },
            /*beforeDestory(){
                console.log("销毁前：");
            },
            destoryed(){
                console.log("销毁完成：");
            }*/
        });
    </script>
</html>