vue 生命周期函数 |

一、vue 生命周期函数

vue提供了一系列的生命周期函数供我们在需要的时候使用

这些函数会在恰当的时机被自动调用

beforeCreate

实例被创建, 但数据还未进行观察, 实例身上也无法访问数据
可以认为MVVM模式中的VM已初始化完毕
这些函数内的this指向当前组件

可以在函数里面加一些 log，或者提示信息类的东西

因为该函数执行，vue仅仅是刚刚初始化了这个组件，还没有对数据进行监听，所以组件实例 this 是不能使用数据的。（就是data里面的数据）

Vue.component('app-header', {
    template: '<header>首页</header>',
    data: function() {
        return { title: '首页' };
    },
    beforeCreate() {
        console.log('beforeCreate');
        console.log(this);	// 当前组件实例
        console.log(this.title);	// undefined
    }
});

created

实例被创建, 数据已经被监听, 所以在实例身上也可以访问数据了
可以认为MVVM模式中的M已初始化完毕
该函数使用频率比较高, 一般的数据初始化操作就写在这里, 比如发送ajax请求

Vue.component('app-header', {
    template: '<header>首页</header>',
    data: function() {
        return { title: '首页' };
    },
    created() {
        console.log('created');
        console.log(this);  // 实例
        console.log(this.title);  // 首页
    }
});

beforeMount

模版已编译好，但视图还没有进行渲染，未插入到页面中
可以认为MVVM模式中的V已初始化完毕

Vue.component('app-header', {
    template: '<header>首页</header>',
    data: function() {
        return { title: '首页' };
    },
    beforeMount() {
        console.log('beforeMount');
        console.log(this);	// 实例
        // $el 为 Vue 实例使用的根 DOM 元素。
        console.log(this.$el);	// undefined, 视图未挂载
    }
});

mounted

模版已插入页面, this.$el属性被创建
项目已经成功运行, 从这个函数开始可以进行DOM操作了

Vue.component('app-header', {
    template: '<header>首页</header>',
    data: function() {
        return { title: '首页' };
    },
    beforeMount() {
        console.log('mounted');
        console.log(this);                  // 实例
      	// $el 为 Vue 实例使用的根 DOM 元素。
        console.log(this.$el);            // header标签, 视图已挂载
    }
});

beforeUpdate

数据被修改, 但视图还未重新渲染
在这个函数中, 可以根据数据变化做进一步修改处理

只要有数据变化就会执行，不用特意去监听某个数据，这个时候视图还没有更新。在这里可以根据数据的变化，看看要不要有其它特殊逻辑处理。

Vue.component('app-header', {
    template: '<header ref="hd" @click="changeTitle">首页</header>',
    data: function() {
        return { title: '首页' };
    },
    methods: {
        changeTitle() {
            this.title = '登陆';
        }
    },
    // 数据变化时才会被调用
    beforeUpdate() {
        console.log('beforeUpdate');
        console.log(this);  // 实例
        console.log(this.title);  // 登陆
        console.log(this.$refs.hd.innerHTML);  // 首页, 因为视图还未更新
    }
});

updated

数据被修改, 视图也更新完毕
在这个函数中, 可以对更新后的视图进行DOM操作

Vue.component('app-header', {
    template: '<header ref="hd" @click="changeTitle">首页</header>',
    data: function() {
        return { title: '首页' };
    },
    methods: {
        changeTitle() {
            this.title = '登陆';
        }
    },
    updated() {
        console.log('updated');
        console.log(this);  // 实例
        console.log(this.title);  // 登陆
        console.log(this.$refs.hd.innerHTML);  // 登陆, 视图已更新
    }
});

beforeDestroy

实例/组件销毁前执行

1
2
3

<div id="app">
    <app-header v-if="headerIsShow"></app-header>
</div>

Vue.component('app-header', {
    template: '<header ref="hd">首页</header>',
    data: function() {
        return { title: '首页' };
    },
    beforeDestroy() {
        console.log('beforeDestroy');
        console.log(this);  // 实例
        console.log(this.$refs.hd);  // header标签
    }
});

// 使用headerIsShow控制header组件的诞生与销毁
var vm = new Vue({
    el: '#app',
    data: {
        headerIsShow: true
    }
});

destroyed

实例/组件销毁后执行，所有绑定都已解除
在这个函数中可以释放一些资源

1
2
3

<div id="app">
    <app-header v-if="headerIsShow"></app-header>
</div>

Vue.component('app-header', {
    template: '<header ref="hd">首页</header>',
    data: function() {
        return { title: '首页' };
    },
    destroyed() {
        console.log('destroyed');
        console.log(this);  // 实例
        console.log(this.$refs.hd);  // undefined
    }
});

// 使用headerIsShow控制header组件的诞生与销毁
var vm = new Vue({
    el: '#app',
    data: {
        headerIsShow: true
    }
});