vue2와 vue3의 라이프사이클 실행 순서 차이
라이프사이클 비교
vue2의 실행 순서
beforeCreate
=>created
=> ;beforeMount
=>마운트됨
=>beforeUpdate
=>업데이트됨
=>Destroy 전=> <code>파괴됨
beforeCreate
=>created
=>beforeMount
=>mounted
=>beforeUpdate
=>updated
=>beforeDestroy
=>destroyed
vue3中执行顺序
setup
=>onBeforeMount
=>onMounted
=>onBeforeUpdate
=>onUpdated
=>onBeforeUnmount
=>onUnmounted
对应关系
vue2->vue3
beforeCreate
->setup
created
->setup
beforeMount
->onBeforeMount
mounted
->onMounted
beforeUpdate
->onBeforeUpdate
updated
->onUpdated
beforeDestroy
->onBeforeUnmount
destroyed
->onUnmounted
其中 vue3中的setup相当于vue2中beforeCreate 与created 但是的执行在beforeCreate 与created之前,所以setup无法使用 data 和 methods 中的数据和方法,即无法操作this,setup中的this等于 undefined,又因为setup中创建的变量与方法最后都要通过return返回出去,所以setup中的程序只能是同步的,而不能是异步,除非return 后面只接受一个异步对象,对象返回setup内定义的变量与方法,然后父组件使用Suspense标签包裹异步组件;
vue3中 如果要使用vue2的beforeDestroy与destroyed需要把名称分别改为beforeUnmount,unmounted
如果vue3中同时使用了vue2的写法,vue3的写法会优先执行;
简单例子说明
父组件App.vue
<template> <h2 id="App父级组件">App父级组件</h2> <button @click="childShow = !childShow">切换child子组件的显示</button> <hr /> <child v-if="childShow" /> </template>
<script lang="ts"> import { defineComponent, reactive, ref } from "vue"; //引入子组件 import child from "./components/child.vue"; export default defineComponent({ name: "App", components: { child, }, setup() { const childShow = ref(true); return { childShow, }; }, }); </script>
<style> * { margin: 0; padding: 0; } </style>
子组件child.vue
<template> <h3 id="child-nbsp-子级组件">child 子级组件</h3> <h4 id="nbsp-name-nbsp">{{ name }}</h4> <button @click="updateName">更新name</button> </template> <script lang="ts"> import { defineComponent, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, ref, } from "vue"; export default defineComponent({ name: "child", //vue2中的生命周期钩子 beforeCreate() { console.log("vue2 中的生命周期 beforeCreate"); }, created() { console.log("vue2 中的生命周期 created"); }, beforeMount() { console.log("vue2 中的生命周期 beforeMount"); }, mounted() { console.log("vue2 中的生命周期 mounted"); }, beforeUpdate() { console.log("vue2 中的生命周期 beforeUpdate"); }, updated() { console.log("vue2 中的生命周期 updated"); }, // vue2中的 beforeDestroy与 destroyed已经改名 无法使用 beforeUnmount() { console.log("vue2 中的生命周期 beforeDestroy(beforeUnmount)"); }, unmounted() { console.log("vue2 中的生命周期 destroyed(unmounted)"); }, setup() { console.log("vue3中的setup"); const name = ref("hhh"); const updateName = () => { name.value += "6……6………6"; }; onBeforeMount(() => { console.log("vue3 中的生命周期 onBeforeMount"); }); onMounted(() => { console.log("vue3 中的生命周期 onMounted"); }); onBeforeUpdate(() => { console.log("vue3 中的生命周期 onBeforeUpdate"); }); onUpdated(() => { console.log("vue3 中的生命周期 onUpdated"); }); onBeforeUnmount(() => { console.log("vue3 中的生命周期 onBeforeUnmount"); }); onUnmounted(() => { console.log("vue3 中的生命周期 onUnmounted"); }); return { name, updateName, }; }, }); </script>
运行起来的显示效果
进入页面 按f12 打开调试 刷新页面
可以看出vue3中
setup
执行在beforeCreate与created前面;onBeforeMount
执行在beforeMount前面;onMounted
执行在mounted前面;
点击 更新name
可以看出vue3中
onBeforeUpdate
执行在beforeUpdate前面;onUpdated
执行在updated前面;点击 切换child子组件的显示
可以看出vue3中
onBeforeUnmount
执行在beforeDestroy前面;onUnmounted
setup
=>onBeforeMount
=>onMounted=>onBeforeUpdate
=>onUpdated
=>onBeforeUnmount
=> vue2->vue3
beforeCreate->설정
-
생성됨
->설정
-
beforeMount -> <code>onBeforeMount
-
마운트됨
->onMount
-
beforeUpdate
- >onBeforeUpdate
업데이트됨
-> onUpdated
삭제 전 -> >onBeforeUnmount
-
destroyed
->onUnmounted
- vue3의 설정 beforeCreate와 동일하며 vue2에서 생성되지만 실행은 이전입니다. beforeCreate 및 생성되었으므로 설정은 데이터 및 메소드에서 데이터 및 메소드를 사용할 수 없습니다. 즉 이를 조작할 수 없습니다. 설정에서 이는 정의되지 않은 것과 동일하며 설정에서 생성된 변수 및 메소드가 마지막으로 있어야 합니다. 반환을 통해 반환되므로 반환이 비동기 개체만 허용하지 않는 한 설정의 프로그램은 비동기가 아닌 동기만 가능합니다. 개체는 설정에 정의된 변수와 메서드를 반환한 다음 상위 구성 요소가 Suspense 태그로 래핑됩니다. . 비동기 컴포넌트;vue3에서 vue2의 beforeDestroy 및 destroy를 사용하려면 각각 beforeUnmount, unmounted로 이름을 변경해야 합니다.
- vue3에서도 vue2를 사용하는 경우 vue3이 먼저 실행됩니다.간단한 예입니다. 설명하기🎜🎜 상위 구성 요소 App.vue🎜
<!DOCTYPE html> <html lang="en"> <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>vue生命周期学习</title> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script> </head> <body> <div id="app"> <h2 id="message">{{message}}</h2> </div> </body> <script> var vm = new Vue({ el: '#app', data: { message: 'Vue的生命周期' }, beforeCreate: function() { console.group('------beforeCreate创建前状态------'); console.log("%c%s", "color:red" , "el : " + this.$el); //undefined console.log("%c%s", "color:red","data : " + this.$data); //undefined console.log("%c%s", "color:red","message: " + this.message) }, created: function() { console.group('------created创建完毕状态------'); console.log("%c%s", "color:red","el : " + this.$el); //undefined console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, beforeMount: function() { console.group('------beforeMount挂载前状态------'); console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, mounted: function() { console.group('------mounted 挂载结束状态------'); console.log("%c%s", "color:red","el : " + this.$el); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, beforeUpdate: function () { console.group('beforeUpdate 更新前状态===============》'); console.log("%c%s", "color:red","el : " + this.$el.innerHTML); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, updated: function () { console.group('updated 更新完成状态===============》'); console.log("%c%s", "color:red","el : " + this.$el.innerHTML); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, beforeDestroy: function () { console.group('beforeDestroy 销毁前状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, destroyed: function () { console.group('destroyed 销毁完成状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message) } }) </script> </html>
<template> <div class="father"> <component-A class="son_A"></component-A> <component-B class="son_B"></component-B> </div> </template> // script部分同上代码,不多写了。
rrreee🎜 하위 구성 요소 child.vue🎜rrreee🎜실행 시 표시 효과🎜🎜🎜🎜페이지에 들어가서 f12를 눌러 디버깅 새로 고침 페이지를 엽니다🎜🎜
🎜🎜🎜vue3에서 확인할 수 있습니다 🎜🎜🎜🎜🎜
setup
beforeCreate 앞에서 실행되고 생성됨 🎜🎜🎜🎜onBeforeMount
beforeMount 앞에서 실행됨; > 마운트된 앞에서 실행됨 🎜🎜🎜🎜이름을 업데이트하려면 클릭🎜🎜🎜🎜🎜 vue3에서는 beforeUpdate보다 먼저 🎜🎜🎜🎜🎜
onBeforeUpdate
가 실행되는 것을 볼 수 있습니다. 🎜🎜🎜 🎜onUpdated
는 업데이트 앞에 실행됩니다. 🎜🎜🎜🎜하위 하위 구성 요소 표시를 전환하려면 클릭하세요. 🎜🎜🎜🎜🎜🎜🎜vue3에서는 🎜🎜🎜🎜🎜
onBeforeUnmount임을 알 수 있습니다.
는 beforeDestroy 앞에서 실행됩니다. 🎜🎜🎜🎜onUnmounted
는 destroy 앞에서 실행됩니다. 🎜🎜🎜🎜각 경우에 세 가지 라이프 사이클 실행 순서🎜🎜라이프 사이클: vue 인스턴스에서는 일련의 초기화 프로세스(Vue 인스턴스 생성부터 소멸까지의 프로세스)를 거치게 됩니다. 이 프로세스가 vue의 수명 주기입니다. 🎜🎜Vue는 개발자에게 사용자 정의 로직을 추가할 수 있도록 일련의 콜백 기능을 제공합니다. Vue의 수명 주기는 생성부터 파괴까지, 그리고 중요한 노드 탑재 데이터 업데이트입니다. 🎜🎜🎜🎜단계 생성 전Create, Created🎜🎜🎜🎜마운트 렌더링 페이지 단계 beforeMount, Mounted🎜🎜🎜🎜업데이트 단계 beforeUpdate, 업데이트됨🎜🎜🎜🎜제거 단계 전Destory, 파괴됨🎜🎜🎜🎜1, 단일 페이지의 수명 주기 시퀀스 🎜🎜 각 사이클 후크 함수의 실행 순서를 확인하기 위한 코드 웨이브 제시: 🎜rrreee🎜🎜 (1) 생성 단계: 이벤트 초기화 및 데이터 관찰 🎜🎜🎜🎜🎜new Vue({}) 빈 인스턴스 객체 생성 , 이 객체에는 수명주기 함수와 일부 기본 이벤트만 있습니다🎜🎜🎜🎜beforeCreate에서는 $el도 데이터도 초기화되지 않습니다🎜🎜🎜🎜created가 실행되고 데이터 초기화가 완료되며 템플릿이 렌더링으로 변환됩니다. 함수(렌더링), 렌더링 함수를 실행하여 가상 노드 트리(메모리 내)를 얻을 수 있습니다🎜 如果有模板文件,则编译成渲染函数;如果没有,则使用外部 HTML 作为模板进行渲染。综合排名优先级:render函数选项 > template选项 > outer HTML.
(2)挂载阶段
为vue实例添加$el成员,替换挂载的DOM成员
其中在beforeMount时,初始化el和data,但el和data,但el和data,但el还是使用{{message}}进行占位
mounted执行时,将message的值进行渲染
(3)更新阶段:触发对应组件的重新渲染
data 被改变时触发生命周期函数 beforeUpdate 执行,data是最新的,页面还未更新(旧的页面)
根据最新的 data 重新渲染虚拟 DOM,并挂载到页面上,完成 Model 到 View 的更新
updated 执行,此时 data 和页面都是最新的
(4)销毁阶段
beforeDestroy钩子函数在实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed钩子函数在Vue 实例销毁后调用。一旦调用,Vue 实例所绑定的所有内容都将被解绑,包括事件监听器,同时所有子实例都将被销毁。
2、父子、兄弟组件的生命周期顺序
<template> <div class="father"> <component-A class="son_A"></component-A> <component-B class="son_B"></component-B> </div> </template> // script部分同上代码,不多写了。
主要可以从以下几种情况分析:
(1)创建过程:
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
(2)组件的内部更新:
子组件的内部更新过程是:子beforeUpdate->子updated
同理父组件的内部更新过程也是:父beforeUpdate->父updated
(3)组件之间的更新:
当子组件使用emit修改父组件状态时,刚好这个状态又绑定在子组件的props上,更新过程是:父beforeUpdate->子beforeUpdate->子updated->父updated
(4)父子组件销毁:
父组件被销毁时子组件也同时被销毁,销毁的钩子过程是:父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
父子组件完整的生命周期图如下所示:
从上图可以看出,在父兄子组件挂载前,各组件的实例已经初始化完成。
子组件挂载完成后,父组件还未挂载。因此,在父组件的mounted钩子中获取API数据时,子组件的mounted钩子无法获取到该数据。
仔细看看父子组件生命周期钩子的执行顺序,会发现created这个钩子是按照从外内顺序执行,所以回显场景的解决方案是:在created中发起请求获取数据,依次在子组件的created中会接收到这个数据。
无论嵌套多少层,Vue父子组件的生命周期钩子执行顺序都是从外到内再从内到外。
3、不同页面跳转时各页面生命周期的执行顺序
跳转不同页面和part2是相同的原理,从第一个页面(index)跳转到下一个页面(secondIndex)时,回先初始化secondIndex,之后在执行index页面的销毁阶段,最后secondIndex挂载完成.
위 내용은 vue2와 vue3의 라이프사이클 실행 순서의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

vue.js는 여러 기능을 통해 사용자 경험을 향상시킵니다. 1. 응답 시스템은 실시간 데이터 피드백을 실현합니다. 2. 구성 요소 개발은 코드 재사용 성을 향상시킵니다. 3. Vuerouter는 원활한 내비게이션을 제공합니다. 4. 동적 데이터 바인딩 및 전환 애니메이션은 상호 작용 효과를 향상시킵니다. 5. 오류 처리 메커니즘은 사용자 피드백을 보장합니다. 6. 성능 최적화 및 모범 사례는 응용 프로그램 성능을 향상시킵니다.

웹 개발에서 vue.js의 역할은 개발 프로세스를 단순화하고 효율성을 향상시키는 점진적인 JavaScript 프레임 워크 역할을하는 것입니다. 1) 개발자는 반응 형 데이터 바인딩 및 구성 요소 개발을 통해 비즈니스 로직에 집중할 수 있습니다. 2) vue.js의 작동 원리는 반응 형 시스템 및 가상 DOM에 의존하여 성능을 최적화합니다. 3) 실제 프로젝트에서는 Vuex를 사용하여 글로벌 상태를 관리하고 데이터 대응 성을 최적화하는 것이 일반적입니다.

vue.js는 2014 년 Yuxi가 출시하여 사용자 인터페이스를 구축하기 위해 진보적 인 JavaScript 프레임 워크입니다. 핵심 장점은 다음과 같습니다. 1. 응답 데이터 바인딩, 데이터 변경의 자동 업데이트보기; 2. 구성 요소 개발, UI는 독립적이고 재사용 가능한 구성 요소로 분할 될 수 있습니다.

Netflix는 React를 프론트 엔드 프레임 워크로 사용합니다. 1) React의 구성 요소화 된 개발 모델과 강력한 생태계가 Netflix가 선택한 주된 이유입니다. 2) 구성 요소화를 통해 Netflix는 복잡한 인터페이스를 비디오 플레이어, 권장 목록 및 사용자 댓글과 같은 관리 가능한 청크로 분할합니다. 3) React의 가상 DOM 및 구성 요소 수명주기는 렌더링 효율성 및 사용자 상호 작용 관리를 최적화합니다.

프론트 엔드 기술에서 Netflix의 선택은 주로 성능 최적화, 확장 성 및 사용자 경험의 세 가지 측면에 중점을 둡니다. 1. 성능 최적화 : Netflix는 React를 주요 프레임 워크로 선택하고 Speedcurve 및 Boomerang과 같은 도구를 개발하여 사용자 경험을 모니터링하고 최적화했습니다. 2. 확장 성 : 마이크로 프론트 엔드 아키텍처를 채택하여 응용 프로그램을 독립 모듈로 분할하여 개발 효율성 및 시스템 확장 성을 향상시킵니다. 3. 사용자 경험 : Netflix는 재료 -UI 구성 요소 라이브러리를 사용하여 A/B 테스트 및 사용자 피드백을 통해 인터페이스를 지속적으로 최적화하여 일관성과 미학을 보장합니다.

NetflixusesAcustomFrameworkCalled "Gibbon"BuiltonReact, NotreactorVuedirectly.1) TeamExperience : 2) ProjectComplexity : vueforsimplerProjects, 3) CustomizationNeeds : reactoffersmoreflex.4)

Netflix는 주로 프레임 워크 선택의 성능, 확장 성, 개발 효율성, 생태계, 기술 부채 및 유지 보수 비용을 고려합니다. 1. 성능 및 확장 성 : Java 및 SpringBoot는 대규모 데이터 및 높은 동시 요청을 효율적으로 처리하기 위해 선택됩니다. 2. 개발 효율성 및 생태계 : React를 사용하여 프론트 엔드 개발 효율성을 향상시키고 풍부한 생태계를 활용하십시오. 3. 기술 부채 및 유지 보수 비용 : Node.js를 선택하여 유지 보수 비용과 기술 부채를 줄이기 위해 마이크로 서비스를 구축하십시오.

Netflix는 주로 VUE가 특정 기능을 위해 보충하는 프론트 엔드 프레임 워크로 React를 사용합니다. 1) React의 구성 요소화 및 가상 DOM은 Netflix 애플리케이션의 성능 및 개발 효율을 향상시킵니다. 2) VUE는 Netflix의 내부 도구 및 소규모 프로젝트에 사용되며 유연성과 사용 편의성이 핵심입니다.


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

Dreamweaver Mac版
시각적 웹 개발 도구

WebStorm Mac 버전
유용한 JavaScript 개발 도구

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
