VueとReacの両方にライフサイクルの概念があり、各コンポーネントインスタンスは作成される前に一連の初期化プロセスを経ます。
ライフサイクル
初期化プロセスの最初から最後までのコンポーネントのプロセスまたはライフサイクルを指します。コンポーネントの最初から最後までのプロセスを説明します。各コンポーネントにはライフサイクルがあり、コンポーネントによって提供されるフック機能を管理します。ライフサイクルを通して。
フック機能
システムの特定の状態とパラメータが変更されると、システムはフック関数と呼ばれる対応する処理関数にすぐに通知します。
Vueのライフサイクル
作成されたvueのイベントをトリガーした後、これはvueインスタンスを指します
var mlistVue = new Vue({
data: {
date "内容"
},
created: function () {
//在实例创建之后同步调用,已建立;
//没有开始 DOM 编译，$elment还不存在,但是实例存在,即this.date存在,可打印出来 。
console.log("建立");
},
beforeCompile: function () {
console.log("未开始编译");
},
compiled: function () {
//在编译结束后调用,此时所有的指令已生效，数据的变化将触发 DOM 更新。
console.log("编译完成");
},
ready: function () {
//在编译结束和 $elment第一次插入文档之后调用，在第一次钩子之后调用。
console.log("一切准备好了");
},
attached :function () {
//暂时触发不了
//在 vm.$elment插入 DOM 时调用
console.log("插入DOM成功");
},
detached :function () {
//在 vm.$elment从 DOM 中删除时调用。必须是由指令或实例方法删除，直接操作 vm.$elment不会 触发这个钩子。
console.log("删除DOM成功");
},
beforeDestroy: function () {
//触发方式,在console里面打listVue.$destroy();
//在开始销毁实例时调用。此时实例仍有功能。
console.log("销毁前");
},
destroyed: function () {
//触发方式,在console里面打myVue.$destroy();其中myVue.$destroy(true)是删除DOM节点,会触发detached函数,但实例仍然存在
//在实例被销毁之后调用。此时所有的绑定和实例的指令已经解绑，注意是解绑不是销毁,所有的子实例也已经被销毁。
console.log("已销毁");
}
});
大物を転載：https：//www.jb51.net/article/147680.htm