---

生命周期概念

从Vue实例创建、运行、到销毁期间，伴随着各种各样的事件，这些事件，统称为生命周期。

---

一、生命周期图示

---

二、生命周期

1.beforeCreate（）{}

初始化之前，data中的数据和methods中的方法不能拿到，还没有初始化
应用：页面重定向

body>
    div id='app'>
        {{msg}}
        input type="text" v-model="value">
    /div>
    script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            },
            beforeCreate() {
                console.log(this);  // Vue$3 {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy(Vue$3), _self: Vue$3, …}
                console.log(this.msg); // undefined
                console.log('11111'); // 11111
            }
        })
    /script>
/body>

---

2.created（）{}

初始化完成，data和methods已经初始化完成，第一个可以调用data和methods的生命周期
应用：数据请求，数据初始化

body>
    div id='app'>
        {{msg}}
        input type="text" v-model="value">
    /div>
    script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            },
            created() {
                this.msg = 20
                console.log(this);  // Vue$3 {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy(Vue$3), _self: Vue$3, …}
                console.log(this.msg); // 20
                console.log('22222'); // 22222
            }
        })
    /script>
/body>

---

3.beforeMount（）{}

虚拟的DOM挂载，页面中数据还没有挂载，内存已编译完成，页面中还未渲染新的数据

body>
    div id='app'>
        {{msg}}
        input type="text" v-model="value">
    /div>
    script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            },
            beforeMount() {
                console.log('333333'); // 333333
            }
        })
    /script>
/body>

---

4.mounted（）{}

真实的DOM，内存中编译好的模板渲染到浏览器页面中，第一个可以操作DOM元素的生命周期，如果要通过某些插件操作页面上的DOM节点，最早要在mounted中进行

body>
    div id='app'>
        {{msg}}
        input type="text" v-model="value">
    /div>
    script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            },
            mounted() {
                console.log('44444'); // 44444
            }
        })
    /script>
/body>

---

5.beforeUpdate（）{}

更新之前，data中数据是最新的，页面中数据还是旧的，未同步，可以执行0次或多次

body>
    div id='app'>
        {{msg}}
        input type="text" v-model="value">
    /div>
    script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            },
            beforeUpdate() {
                console.log('55555'); // 55555
            }
        })
    /script>
/body>

---

6.updated（）{}

更新之后，页面中和data中数据保持同步，都是最新的，可以执行0次或多次

body>
    div id='app'>
        {{msg}}
        input type="text" v-model="value">
    /div>

    script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            },
            updated() {
                console.log('66666'); // 66666
            }
        })
    /script>
/body>

---

7.beforeDestroy（）{}

销毁之前
应用：清空定时器，页面监听

body>
    div id='app'>
        {{msg}}
        input type="text" v-model="value">
    /div>
    script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            },
            beforeDestroy() {
                console.log('beforeDestroy');
            }
        })
    /script>
/body>

---

8.destroyed（）{}

销毁之后

body>
    div id='app'>
        {{msg}}
        input type="text" v-model="value">
    /div>
    script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            }
            destroy() {
                console.log('destroy');
            }
        })
    /script>
/body>

---

三、vm.$mount(el)

没有定义控制区域el时，需要在实例化Vue后加vm.$mount(‘需要操作的DOM控制区域’)

1.未加vm.$mount(el)

body>
    div id='app'>
        {{msg}}
        !-- {{msg}} -->
    /div>
    script>
        const vm = new Vue({
            // el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            }
        })
    /script>
/body>

---

2.加上vm.$mount(el)

body>
    div id='app'>
        {{msg}}
        !-- 10 -->
    /div>
    script>
        const vm = new Vue({
            // el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            }
        })
        vm.$mount('#app')
    /script>
/body>

---

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 浅谈煤矿井下6kV动力电缆绝缘线监测系统的设计与应用

罗轩志 江苏安科瑞电器制造有限公司 江苏江阴 214405    摘要：针对供电系统绝缘问题检测技术限制煤炭产量效率的问题，以某煤炭企业6kV井下供电系统为研究对象，开展了在线监测系统设计与应用工作。结果表明，系统工作稳定，满足井下电力电缆绝缘在线监要求，降低…