vue系列生命周期（四）

作者: 伊泽瑞尔灬 | 来源:发表于2018-11-05 15:19 被阅读5次

vue生命周期
vue生命周期
2018-09-23非父子组件传值与生命周期
vue系列生命周期（四）
vue生命周期学习
Vue生命周期详解
Vue生命周期和钩子函数及使用keeplive缓存页面不重新加载
vue（2）生命周期
2018-09-21 vue
Vue 面试中常问知识点整理

vue生命周期，是指vue实例从创建到销毁的一个过程，掌握了这个过程中各个阶段的状态，就能合理使用，是我们的程序性能更高，开发更合理，减少bug。
我们先看一张官方的vue的生命周期的图：

vue生命周期
可以看到，vue实例生命周期分为：

beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,activated,deactivated,beforeDestroy,destroyed,errorCaptured

。下面我们再看看各个周期的含义，及平常我们的用途。

各个周期的作用

这里说明一下，created和mounted2个阶段的区别。created的时候，dome节点并没有加载，如果做一些dome从操作，如document.getElementById时是获取不到元素的。mounted能获取到dome节点，但也不完全加载完，完全加载完可以放到this.$nextTick()的回调里面。

下面看一个完整的实例，来表明各个周期的执行情况。

<!doctype html>
<html lang="en">
<head>
    <title>vue生命周期测试</title>
</head>
<body>
<div id="test">
    <h3>单组件</h3>
    <span>{{testData}}</span>
    <button @click="testData += 1">更新data里面的值</button>
    <button @click="destroyVue">销毁VUE实例</button>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>
<script>
    new Vue({
        el: "#test",
        data() {
            return {
                testData: 0
            }
        },
        beforeCreate() {
            console.log("beforeCreate")
        },
        created() {
            console.log("created")
        },
        beforeMount() {
            console.log("beforeMount")
        },
        mounted() {
            console.log("mounted")
        },
        beforeUpdate() {
            console.log("beforeUpdate")
        },
        updated() {
            console.log("updated")
        },
        beforeDestroy() {
            console.log("beforeDestroy")
        },
        destroyed() {
            console.log("destroyed")
        },
        methods: {
            destroyVue() {
                this.$destroy()
            }
        }
    })
</script>
</html>

可以看到vue实例创建时，马上执行了：