Vue的生命周期和钩子函数

作者: 雪映月圆 | 来源:发表于2019-03-12 19:14 被阅读0次

Vue的生命周期与钩子函数
vue 获取节点获取事件
详细的分析 Vue生命周期
深入浅出Vue生命周期钩子函数
学习链接
Vue-计算属性和监听属性
什么是生命周期钩子函数？
vue生命周期分析
Vue生命周期
😄--前端面试整理--VueJs

Vue的生命周期

Vue示例被创建到销毁的过程

Vue的钩子函数详解

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue的声明周期和钩子函数</title>
</head>

<body>
    <div id="app">
        <button @click="win">control</button>
        {{msg}}
    </div>
    <script src="js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello'
            },

            // template: "<h1>{{msg}}-------ok</h1>",
            methods: {
                win() {
                    alert('ok');
                }
            },

            // 生命周期(钩子函数 hook)函数就是vue实例在某一个时间点会自动执行的函数

            // 此时vue实例已经进行了基础的初始化，但data数据还没有绑定到vue的实例，此时，访问不到data数据
            beforeCreate() {
                console.log('beforeCreate', this.msg);
            },

            // 此时，data数据已经注入vue的实例，我们可以通过this访问到data数据
            created() {
                console.log('created', this.msg);
            },

            // 此时，模板和数据已经结合，编译，但还没有挂载到指定的挂载点上 （或者没有挂载到指定的页面元素上）
            beforeMount() {
                console.log('beforeMount', this.$el);
            },

            // 此时，编译后的模板已经挂载到挂载点上，我们会看到加载了数据的视图的更新
            mounted() {
                console.log('mounted', this.$el);
            },

            // 当有数据发生改变时，模板重新渲染之前，会触发该事件。
            beforeUpdate() {
                console.log('beforeUpdate', this.$el.innerHTML);
            },

            // 当模板重新渲染之后，触发该事件
            updated() {
                console.log('updated', this.$el.innerHTML);
            },

            // 当执行vm.$destroy()，vue实例销毁之前发生
            beforeDestroy() {
                console.log('beforeDestroy');
            },

            //vue实例销毁之后发生，此时再改变数据，不会触发视图更新（或者视图重新渲染）
            destroyed() {
                console.log('destroyed');
            }

        });

        //也可以通过vm.$mount注册挂载点
        // vm.$mount('#app');
    </script>
</body>

</html>