この記事では、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:

data および

に基づくテンプレート

、はメモリ内でコンパイルされ、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>

ログイン後にコピー

マウントステージ:

使用

メモリ

のコンパイルによって生成された HTML 構造は、el 属性で指定された DOM 要素を置き換えます #、メモリ内の HTML 構造はブラウザに正常に表示されます。ブラウザ

現在のコンポーネントの 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>
ログイン後にコピー
実行フェーズ

いわゆる実行フェーズは、ユーザーとコンポーネント間の対話です

beforeUpdate阶段：

这个函数的触发的必要前提是，我们修改了 data 里面的数据。将要（注意：仅仅是将要，还没有呢）根据变化过后最新的数据，重新渲染组件的模板结构。

<template>
  <div>
    <h2 id="myid">{{message}}</h2>
    <button @click="message+=&#39;~&#39;">点击修改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>

ログイン後にコピー

updated阶段：

已经根据最新的数据，完成了组件的DOM结构的重新渲染。注意：当数据变化之后，为了能操作到最新的 DOM 结构，必须把代码写到 updated 生命周期函数中。

<template>
  <div>
    <h2 id="myid">{{message}}</h2>
    <button @click="message+=&#39;~&#39;">点击修改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)与其它实例的连接，接绑它的全部指令及事件监听器。

beforeDestroy阶段：

将要销毁此组件，此时尚未销毁，组件还处于正常工作状态。在这阶段一般做一些首尾工作。

<template>
  <div>
    <h2 id="myid">{{message}}</h2>
    <button @click="message+=&#39;~&#39;">点击修改message值</button>
  </div>
</template>
<script>
export default {
    props:['info'],
    data(){
        return {
            message:'hello test',
        }
    },
    beforeDestroy(){
        console.log('beforeDestroy');
    }
}

ログイン後にコピー

destroyed阶段：

销毁当前组件的数据侦听器、子组件、事件监听等，组件已经被销毁，此组件在浏览器中对应的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：清除定时器、绑定自定义事件、取消订阅消息等(收尾工作)

下面是实例生命周期的图表。你现在并不需要完全理解图中的所有内容，但以后它将是一个有用的参考。