ライフサイクル
コンポーネントのライフサイクルにおけるいくつかのプロセス
- 作成する
- マウント
- 更新
- 破壊
作成する
- beforeCreate（作成前）
最初のイベントとライフサイクルの後 - 作成時（作成後）に
関連データを挿入すると、この時点でデータの値は取得できますが、DOMは取得できません
マウント
- beforeMount（hang before）
データがvueテンプレートを使用してHTMLでレンダリングされている場合、ページにコンテンツはありません - マウント済み（ハング後）
ページ上のコンパイル済みHTMLを置き換えた後、この時点で実際のDOMを取得できます
更新
- beforeUpdate（更新前）
データの値が変更されると、関数がトリガーされます
データの値が変更されると更新（更新）され、関数がトリガーされます
破壊
- beforeDestroy（破壊前）
- 破壊された（破壊後）
{
data () {
return {
}
},
methods: {
},
computed: {
},
生命周期钩子函数 () {
}
}
例えば
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h4 ref="strBox">{
{str}}</h4>
<my></my>
</div>
<script src="../js/vue.js"></script>
<script>
const my = {
template:
`
<div>hello woeld</div>
`,
methods: {
},
beforeCreate() {
console.log("beforeCreate" + "-------my1");
},
created() {
console.log("created" + "-------my2");
},
beforeMount() {
console.log("beforeMount" + "-------my3");
},
mounted() {
console.log("mounted" + "-------my4");
},
beforeUpdate() {
console.log("beforeUpdate" + "-------my5");
},
updated() {
console.log("updated" + "-------my6");
},
beforeDestroy() {
console.log("beforeDestroy" + "-------my7");
},
destroyed() {
console.log("beforeDestroy" + "-------my8");
},
}
Vue.component('my',my)
var vm = new Vue({
el: '#app',
data: {
str:'你是个麻瓜'
},
methods: {
},
// vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
// 加loading事件
beforeCreate() {
console.log("beforeCreate" + "-------app1");
},
// vue实例的数据对象data有了，$el还没有
// 结束loading、请求数据为mounted渲染做准备
created() {
console.log("created" + "-------app2");
},
// vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换。
beforeMount() {
console.log("beforeMount" + "-------app3");
},
// vue实例挂载完成，data.filter成功渲染
mounted() {
console.log("mounted" + "-------app4");
console.log(this.$refs.strBox);
},
// data更新时触发
beforeUpdate() {
console.log("beforeUpdate" + "-------app5");
this.$nextTick(() => {
console.log(this.$refs.strBox);
})
console.log(this.$refs.strBox);
},
// data更新时触发
updated() {
console.log("updated" + "-------app6");
},
// 组件销毁时触发
beforeDestroy() {
console.log("beforeDestroy" + "-------app7");
},
// 组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在
destroyed() {
console.log("beforeDestroy" + "-------app8");
},
});
</script>
</body>
</html>