이 글에서는 Vue 구성 요소 수명 주기의 세 단계인 생성 단계, 실행 단계, 파괴 단계에 대해 자세히 소개합니다. 모두에게 도움이 되기를 바랍니다.

이 기사에서는 Vue 구성 요소 수명 주기의 세 단계(생성, 실행 및 소멸)에 대해 설명합니다.

컴포넌트 라이프 사이클

라이프 사이클 (Life Cycle)은 -> 전체를 파괴하세요 무대는 기간을 강조합니다. [관련 추천 : vuejs 영상 튜토리얼, web front-end development]Life Cycle function : Vue Framework에서 제공하는 내장 기능으로,

vuejs와 함께 순서대로 자동 실행됩니다. 구성 요소의 수명주기.

생성 단계

beforeCreate 단계

이벤트 및 수명 주기 기능을 초기화하면 구성 요소의 props

data/ 방법아직 아님 생성되어 사용할 수 없는 상태입니다.

<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를 사용할 수 없기 때문에 호출하면 모든 콘솔에서 오류가 보고되었습니다.

생성 단계

props, data,methods

를 초기화했으며 구성 요소의 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

및

template을 기반으로 하며 메모리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>

로그인 후 복사

mounted stage

el 속성으로 지정된 DOM 요소

를 memory

에서 컴파일 및 생성된 HTML 구조

로 대체하며 메모리의 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：清除定时器、绑定自定义事件、取消订阅消息等(收尾工作)

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