Vue学习笔记（四）之Vue的生命周期函数

Vue生命周期函数。

学习代码：

<!DOCTYPE html>
<html>

<head>
    <script src="http://vuejs.org/js/vue.js"></script>
    <meta charset="utf-8">
    <title>Vue 生命周期函数</title>
</head>

<body>
<div id="app">

</div>
<script>
    //生命周期含糊是就是vue实例在某一个时间点会自动实行的函数
    var vm = new Vue({
        el: "#app",
        template: "<div>{{test}}</div>",
        data: {
          test: "Hello World"
        },
        beforeCreate: function () {
            console.log("beforeCreate")
        },
        //初始化实例和生命周期后控制台自动打印出beforeCreate
        created: function () {
        console.log("created")
        },
        //初始化注入和双向绑定控制台自动打印出created
        beforeMount: function () {
            console.log(this.$el)
            console.log("beforeMount")
        },
        //模板挂载之前输出的模板
        mounted: function () {
            console.log(this.$el)
            console.log("mounted")
        },
        //模板挂载之后输出的模板
        beforeDestroy: function () {
            console.log("beforeDestroy")
        },
        // vm.$destroy()调用时，控制台打印beforeDestory
        destroyed: function () {
            console.log("destroyed")
        },
        //拆解组件，事件监听者后控制台打印出destroyed
        beforeUpdate: function () {
            console.log("beforeUpdate")
        },
        //执行vm.$data.test = "by world"后，控制台打印出beforeUpdate
        updated: function () {
            console.log("updated")
        }
        //页面重新渲染后，控制台打印出updated
    })
</script>
</body>

</html>

PS：根据上面代码注释，一个一个去执行函数，结合生命周期图去理解。生命周期函数除了上面8个，还有三个函数分别是activated，deactivated和errorCaptured。详见：https://cn.vuejs.org/v2/api/#选项-生命周期钩子

Vue生命周期函数。

FEATURED TAGS

FRIENDS