前に書かれている：私は「海への航海」です、このニックネームは私の名前と私のガールフレンドの名前に由来します。テクノロジー、オープンソース、プログラミングが大好きです。
技术是开源的、知识是共享的。
このブログは、あなたの学習の小さな要約と記録です。Javaとアルゴリズムに興味がある場合は、私の開発をフォローすることができ、私たちは一緒に勉強します。
用知识改变命运，让我们的家人过上更好的生活。
1. vueのライフサイクル
人間がライフサイクルを持っているのと同じように、プログラム自体と、プログラム内のすべてのインスタンスおよびコンポーネントにはライフサイクルがあります。
人のライフサイクルは、誕生から始まり、死に至ります。誕生から死までの数十年で、多くの主要なイベントが発生します。これらのイベントは、一部の人々または世界全体に影響を及ぼします。
对于一个程序或Vue.js中的一个实例来说，其生命周期开始于创建，当新建一个实例的时候，生命周期就开始了；而当销毁一个实例之后，生命周期就结束了。
各Vueインスタンスは、作成時に一連の初期化プロセスを実行します。たとえば、データ監視を設定し、テンプレートをコンパイルし、インスタンスをDOMにマウントし、データが変更されたときにDOMを更新する必要があります。同時に、ライフサイクルフックと呼ばれるいくつかの関数がこのプロセスで実行されます。これにより、ユーザーはさまざまな段階で独自のコードを追加できます。
第二に、フック関数
作成から破棄のプロセスに至るまで、これらのプロセスにはいくつかの関数の自己呼び出しが伴います。これらの関数を呼び出します
钩子函数。
なぜフックと呼ばれるのですか？その理由は、インスタンスイベントが発生した後、つまりフックがインスタンスの状態またはイベントをフックした後、プリセットコードに応答する必要があるからです。
1.作成フェーズのライフサイクル
① beforeCreate
インスタンスが初期化された後、データオブザーバーとイベント/ウォッチャーイベントが構成前に呼び出されます。
此时的 data 和 methods 中的 数据都还没有没初始化。
② created
インスタンスが作成された直後に呼び出されます。このステップで、インスタンスは次の構成を完了しました：データオブザーバー（データオブザーバー）、属性とメソッドの操作、監視/イベントイベントコールバック。それです
此时 data 和 methods已经可以初始化完成了。ただし、マウントフェーズはまだ開始されておらず、$ el属性は現在利用できません。ページはレンダリングされていません。
注：
メソッド内のメソッドを呼び出したり、データ内のデータを操作したりする場合は、できるだけ早く作成された状態でのみ操作できます。
③ beforeMount
マウントが始まる前に呼び出されます。現時点で
页面上还看不到真实的数据は、テンプレートはメモリにコンパイルされていますが、テンプレートはページにレンダリングされていません。
注：
beforeMountが実行されたとき、ページ上の要素は実際には置き換えられておらず、以前に書き込まれたいくつかのテンプレート文字列が表示されています。
④ mounted
インスタンスがマウントされた後に呼び出され、この時点でelは新しく作成されたvm。Elに置き換えられます。今回は
据已经真实渲染到页面上了。
Mountedは、インスタンス作成時の最後のライフサイクル関数です。mountedを実行すると、インスタンスが完全に作成されたことになります。
注：
マウントは、すべてのサブコンポーネントが一緒にマウントされることを保証しません。ビュー全体がレンダリングされるまで待機する場合は、vm。$ NextTickをマウントして使用できます。
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
2.運用フェーズのライフサイクル
① beforeUpdate
仮想DOMにパッチを適用する前に、データが更新されたときに呼び出されます。現時点
页面上数据还是旧的，但是 data 数据是最新的では、ページは最新のデータと同期されていません。
これは、追加されたイベントリスナーを手動で削除するなど、更新前に既存のDOMにアクセスするのに適しています。
② updated
仮想DOMは再レンダリングされ、データの変更によりパッチが適用されます。その後、フックが呼び出されます。現時点で
页面上数据已经替换成最新的。
このフックが呼び出されると、コンポーネントDOMが更新されているため、DOMに依存する操作を実行できます
。ただし、ほとんどの場合、この期間中は状態を変更しないでください。対応する状態が変化する場合、通常は代わりに計算属性またはウォッチャーを使用するのが最善です。
3.破壊フェーズのライフサイクル
① beforeDestroy
インスタンスが破棄される前に呼び出されます。このステップでは、インスタンスはまだ完全に利用可能です。
② destroyed
インスタンスが破棄された後に呼び出されます。フックが呼び出された後、Vueインスタンスに対応するすべての命令がバインド解除され、すべてのイベントリスナーが削除され、すべての子インスタンスも破棄されます。
3、コード例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生命周期钩子函数</title>
<script type="text/javascript" src="js/vue.js"></script>
<style>
.btn-update {
text-align: center;
color:white;
background-color: green;
font-size: 15px;
margin-top: 10px;
}
.btn-destroy {
text-align: center;
color: white;
background-color: red;
font-size: 15px
}
.btn-wrap {
margin: 10px auto;
width: 32%;
}
.str {
background-color: skyblue;
color: white;
font-size: 30px;
width: 18%;
}
</style>
</head>
<body>
<div id="app">
<div class='str'>{{msg}}</div>
<button class='btn-update' @click='update'>更新</button>
<button class='btn-destroy' @click='destroy'>销毁</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: '我是扬帆向海'
},
methods: {
update: function () {
this.msg = '我被改变了~~~';
},
destroy: function () {
this.$destroy();
}
},
beforeCreate: function () {
console.log('beforeCreate---创建前状态');
},
created: function () {
console.log('created---创建完毕状态');
},
beforeMount: function () {
console.log('beforeMount---挂载前状态');
},
mounted: function () {
console.log('mounted---挂载结束状态');
},
beforeUpdate: function () {
console.log('beforeUpdate---数据更新之前状态');
},
updated: function () {
console.log('updated---数据更新完成状态');
},
beforeDestroy: function () {
console.log('beforeDestroy---实例销毁之前状态');
},
destroyed: function () {
console.log('destroyed---实例销毁完成状态');
}
});
</script>
</body>
</html>
ページの読み込みプロセス中に、作成フェーズの4つのフック関数が順番に実行されます。
最初のページの読み込みは、beforeCreate、created、beforeMount、マウントされたフック関数をトリガーします。DOMレンダリングはすでにマウントされています。
ライフサイクルフック機能読み込み処理の効果図
レベルが限られているため、このブログには必然的に不備があります。ぜひお知らせください。
