0
点赞
收藏
分享

微信扫一扫

VUE生命周期

西红柿上校 2022-04-13 阅读 96
vue.jsvue

首先得 new Vue() 实例化一个vue实例。

这时会执行初始化函数 :初始化生命周期函数 initLifecycle()、初始化事件 initEvent()、定义createElement函数 initRender()。

1. 执行 beforeCreated()

beforeCreated执行后,开始定义data数据、方法和事件,并完成数据劫持observe以及给组件实例配置watcher观察者实例。 这样当数据发生变化以后,才能感知数据的变化,完成页面的渲染。

2. 执行 created() ,此时已经可以拿到data和method下的方法 ,但是页面还没渲染出来

created执行后,如果没有实例对象el,会等待调用$mount(el),调用后$mount(el)后判断是否有template,如果有实例对象el,也会判断是否有template参数,拿到后template会转成render函数

3.执行 beforeMount()

beforeMount执行后,首先会产生一个虚拟dom,当render函数被渲染时就会产生真实的dom。真实的dom会替换掉原有的编译模板template,生成一个真正可用的HTML

4. 执行 mounted()  生命周期属性 _isMounted被置为true。另外我们是可以操作dom的,因为dom这时候已经渲染完成了

ok 到这了如果数据不变化的话,其实不用也不会执行beforeUpdate 和 update

5. 执行 beforeUpdate() 会重新生成一个新的虚拟dom,然后最拿这个最新的虚拟dom和原来的虚拟dom进行diff运算,从而更新render函数的最新数据,再将更新后的render重新渲染成真实dom,也就是数据更新

6. 执行 updated() ,这里可操作dom,并拿到最新一次更新的dom

ok 如果说vm.$destory()不被调用其实 beforeDestory 和 destory不用也不会执行

7. 执行 beforeDestory()  此时还能操作dom

beforeDestory执行后,会做一系列销毁,接触各种数据引用,移除事件监听,删除组件_watcher,删除子实例,删除自身self,同时将_isDestroyed设置为true

8. 执行 destory()  销毁已完成

ps:执行mounted和updated,不需要等所有的子组件都挂载完成,如果希望所有的视图都更新完后在做点什么事的话,最好在mounted和updated中加个$nextTick()。要做的事放在$nextTick()里

代码如下:


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
 
<body>
    <div id="app">
        <p>{{ message }}</p>
        <button @click="changeMessage">改变Message</button>
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "Hello Vue!"
        },
        methods: {
            changeMessage() {
                this.message = 'goodbye world'
            }
        },
        beforeCreate() {
            console.log("~~~~~~ 初始化前 ~~~~~~");
            console.log(this.message);
            console.log(this.$el);
        },
        created() {
            console.log("~~~~~~ 初始化完成 ~~~~~~");
            console.log(this.message);
            console.log(this.$el);
        },
        beforeMount() {
            console.log("~~~~~~ 挂载前 ~~~~~~");
            console.log(this.message);
            console.log(this.$el);
        },
        mounted() {
            console.log("~~~~~~ 挂载完成 ~~~~~~");
            console.log(this.message);
            console.log(this.$el);
        },
        beforeUpdate() {
            console.log("~~~~~~ 更新前 ~~~~~~");
            console.log(this.message);
            console.log(this.$el);
        },
        updated() {
            console.log("~~~~~~ 更新完成 ~~~~~~");
            console.log(this.message);
            console.log(this.$el);
        }
    });
</script>
 
</html>
举报

相关推荐

0 条评论