ホームページ >ウェブフロントエンド >Vue.js >この記事では、Vue コンポーネントのライフサイクルの 3 つの段階 (作成、実行、破棄) について説明します。
この記事では、Vue コンポーネントのライフ サイクルの 3 つの段階 (作成フェーズ、実行フェーズ、破棄フェーズ) について詳しく説明します。皆様のお役に立てれば幸いです。
ライフ サイクル(ライフ サイクル) とは、コンポーネントは -> から作成されます -> は ## 全体を破棄します# 舞台は期間を強調します。 [関連する推奨事項: vuejs ビデオ チュートリアル 、Web フロントエンド開発 ]
ライフ サイクル機能 : vue フレームワークで構成されています。提供された組み込み関数は、コンポーネントのライフサイクルに沿って順番に自動的に実行されます。
props/data/methods はまだ作成されていないため、使用できない状態です。
<script> export default { props:['info'], data(){ return { message:'hello test' } }, methods:{ show(){ console.log('调用了 Test 组件的 show 方法'); } }, // 创建阶段的第一个生命周期 beforeCreate(){ console.log(this.info); //props console.log(this.message); //data this.show() //methods }, } </script>props/data/methods は使用できないため、呼び出すとすべてのコンソールでエラーが報告されます。
、コンポーネントのプロパティ/データ/メソッドが作成されました。これらはすべて使用可能な状態にあります。しかし、コンポーネントのテンプレート構造はまだ完成していません! <script>
export default {
props:['info'],
data(){
return {
message:'hello test'
}
},
methods:{
show(){
console.log('调用了 Test 组件的 show 方法');
}
},
// 创建阶段的第二个生命周期函数
created(){
console.log(this.info);
console.log(this.message);
this.show()
}
}
</script>
## そして、要求されたデータをテンプレートのレンダリング時に使用するデータに転送します。
<template> <div> <h2>test组件--{{nums.length}}</h2> </div> </template> <script> export default { props:['info'], data(){ return { message:'hello test', nums:[] } }, methods:{ show(){ console.log('调用了 Test 组件的 show 方法'); }, initlist(){ const xhr = new XMLHttpRequest() xhr.addEventListener('load',()=>{ const result = JSON.parse(xhr.responseText) console.log(result); this.nums = result.data }) xhr.open('GET','请求的接口') xhr.send() } }, created(){ this.initlist() } } </script> <style lang="less" scoped> div{ background-color: #f00; } </style>
beforeMount stage:
、 はメモリ内でコンパイルされ、HTML 構造が生成されます。メモリ内にコンパイルされた HTML 構造 がブラウザにレンダリングされます。現時点では、ブラウザ には、現在のコンポーネント の DOM 構造がまだありません。
<template> <div> <h2 id="myid">test组件--{{nums.length}}</h2> </div> </template> <script> export default { props:['info'], data(){}, methods:{}, beforeCreate(){}, created(){}, beforeMount(){ console.log('beforeMount'); const dom = document.querySelector('#myid') console.log(dom); } } </script>マウントステージ:
使用
メモリ 現在のコンポーネントの DOM 構造 # がすでに含まれています。 <template>
<div>
<h2 id="myid">test组件--{{nums.length}}</h2>
</div>
</template>
<script>
export default {
mounted(){
const dom = document.querySelector('#myid')
console.log(dom);
}
}
</script>
vue は、テンプレートの解析が完了し、最初に見つかった実際の DOM 要素をページに配置した後にマウントされた呼び出しを呼び出します (マウントは完了しました)。 <template>
<div>
<h2 :style="{opacity}">欢迎学习Vue</h2>
</div>
</template>
<script>
export default {
data(){
return {
opacity:1
}
},
mounted(){
setInterval(()=>{
//我们在使用箭头函数时,this的指向mounted自动帮我们设置好是 vm 了
this.opacity-=0.01
if(this.opacity <= 0) this.opacity = 1
},6)
},
}
</script>
実行フェーズ
いわゆる実行フェーズは、ユーザーとコンポーネント間の対話です
这个函数的触发的必要前提是,我们修改了 data 里面的数据。将要(注意:仅仅是将要,还没有呢)根据变化过后最新的数据,重新渲染组件的模板结构。
<template> <div> <h2 id="myid">{{message}}</h2> <button @click="message+='~'">点击修改message值</button> </div> </template> <script> export default { data(){ return { message:'hello test', } }, beforeUpdate(){ console.log('beforeUpdate'); //说明:点击按钮修改data值才能触发这个函数 console.log(this.message); //打印修改后的值 const dom = document.querySelector('#myid') console.log(dom.innerHTML); //打印整个文本,但并没有出现我们修改后的值,说明页面并没有重新渲染 } } </script>
已经根据最新的数据,完成了组件的DOM结构的重新渲染。注意:当数据变化之后,为了能操作到最新的 DOM 结构,必须把代码写到 updated 生命周期函数中。
<template> <div> <h2 id="myid">{{message}}</h2> <button @click="message+='~'">点击修改message值</button> </div> </template> <script> export default { props:['info'], data(){ return { message:'hello test', } }, updated(){ console.log('updated'); console.log(this.message); //打印修改后的值 const dom = document.querySelector('#myid') console.log(dom.innerHTML); //打印整个文本,但出现了我们修改后的值,说明页面被重新渲染 } } </script>
完全销毁一个实例。清理它(vm)与其它实例的连接,接绑它的全部指令及事件监听器。
将要销毁此组件,此时尚未销毁,组件还处于正常工作状态。在这阶段一般做一些首尾工作。
<template> <div> <h2 id="myid">{{message}}</h2> <button @click="message+='~'">点击修改message值</button> </div> </template> <script> export default { props:['info'], data(){ return { message:'hello test', } }, beforeDestroy(){ console.log('beforeDestroy'); } }
销毁当前组件的数据侦听器、子组件、事件监听等,组件已经被销毁,此组件在浏览器中对应的DOM结构已被完全移除!
直接暴力的将vm干掉,页面就不能再进行交互。设置透明的按钮也就作废了。
<template> <div> <h2 :style="{opacity}">欢迎学习Vue</h2> <button @click="opacity = 1">透明度设置为1</button> <button @click="stop">点我停止变化</button> </div> </template> <script> export default { data(){ return { opacity:1 } }, methods:{ stop(){ // clearInterval(this.timer) this.$destroy() } }, mounted(){ // const dom = document.querySelector('#myid') // console.log(dom); console.log('mounted',this); this.timer = setInterval(()=>{ console.log('setInterval'); this.opacity-=0.01 if(this.opacity <= 0) this.opacity = 1 },6) }, beforeDestroy(){ clearInterval(this.timer) console.log('vm即将被销毁'); } } </script> <style lang="less" scoped> div{ // background-color: #f00; } </style>
1)销毁后借助Vue开发者工具看不到任何信息。
2)销毁后自定义事件会失效,但原生的DOM事件依然有效
3)一般不会在beforeDestroy操作数据,因为即使操作数据,也不会再触发更新流程了
生命周期:
1)又称:生命周期回调函数、生命周期函数、生命周期钩子。
2)含义:vue在关键时刻帮助我们调用一些特殊名称的函数。
3)生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。
4)生命周期函数中的this指向是 vm 或 组件实例对象。
常用的生命周期钩子:
1)mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等(初始化操作)
2)beforeDestroy:清除定时器、绑定自定义事件、取消订阅消息等(收尾工作)
下面是实例生命周期的图表。你现在并不需要完全理解图中的所有内容,但以后它将是一个有用的参考。
以上がこの記事では、Vue コンポーネントのライフサイクルの 3 つの段階 (作成、実行、破棄) について説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。