vue3生命周期函数更改了几个

这篇文章主要介绍“vue3生命周期函数更改了几个”，在日常操作中，相信很多人在vue3生命周期函数更改了几个问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue3生命周期函数更改了几个”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联建站2013年开创至今，是专业互联网技术服务公司，拥有项目成都网站建设、做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元安国做网站,已为上家服务,为安国各地企业和个人服务,联系电话:13518219792

vue3改了4个生命周期函数。Vue3组合式api取消了beforeCreated和created钩子函数，采用steup钩子代替，且里面不能使用this。Vue3里面的组件销毁的钩子函数由destroyed和beforeDestroy换成了beforeUnmount和unmounted。

Vue实例有一个完整的生命周期，也就是从new Vue()、初始化事件(.once事件)和生命周期、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等⼀系列过程，称这是Vue的生命周期。

vue应用程序中有4个主要事件(8个钩子)：
创建 ---- 在组建创建时执行
挂载 ---- DOM被挂载时执行
更新 ---- 当响应数据被修改时执行
销毁 ----在元素被销毁之前立即执行

Vue2的生命周期

vue3生命周期函数更改了几个

（1） beforeCreate（创建前)

数据监测(getter和setter)和初始化事件还未开始，此时 data 的响应式追踪、
event/watcher 都还没有被设置

不能访问到data、computed、watch、methods上的方法和数据。

（2）created（创建后)

创建完成后会自动执行函数

（3） beforeMount（挂载前）

在挂载开始之前被调用，相关的render函数首次被调用。

这次Vue开始解析模板，生成虚拟DOM存在内存中，还没有把虚拟DOM转换成真实DOM，插入页面中

（4）mounted（挂载后）

在el被新创建的 vm.$el（就是真实DOM的拷贝）替换，并挂载到实例上去之后调用（将内存中的虚拟DOM转为真实DOM，真实DOM插入页面）。

一般在这个阶段进行：开启定时器，发送网络请求，订阅消息，绑定自定义事件等等

（5）beforeUpdate（更新前）

响应式数据更新时调用，此时虽然响应式数据更新，但是对应的真实 DOM 

还没有被渲染（数据是新的，但页面是旧的，页面和数据没保持同步呢）。

（6）updated（更新后）

由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。

调用时，组件 DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环

（7）beforeDestroy（销毁前）

实例销毁之前调用

在这个阶段一般进行关闭定时器，取消订阅消息，解绑自定义事件。

（8）destroyed（销毁后）

实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务端渲染期间不被调用。


	
		
		分析生命周期
		
		
	
	
		
		
			
			当前的n值是：{{n}}
			点我n+1
			点我销毁vm


	

	
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			// template:`
			// 	
			// 		当前的n值是：{{n}}
			// 		点我n+1
			// 	
			// `,
			data:{n:1},
			methods: {
				add(){
					console.log('add')
					this.n++
				},
				bye(){
					console.log('bye')
					this.$destroy()
				}
			},
			watch:{
				n(){
					console.log('n变了')
				}
			},
			beforeCreate() {
				console.log('beforeCreate')
			},
			created() {
				console.log('created')
			},
			beforeMount() {
				console.log('beforeMount')
			},
			mounted() {
				console.log('mounted')
			},
			beforeUpdate() {
				console.log('beforeUpdate')
			},
			updated() {
				console.log('updated')
			},
			beforeDestroy() {
				console.log('beforeDestroy')
			},
			destroyed() {
				console.log('destroyed')
			},
		})

常用的生命周期钩子：
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】
关于销毁Vue实例:
(1)销毁后借助Vue开发者工具看不到任何信息。
(2)销毁后自定义事件会失效，但原生DOM事件依然有效。
(3)一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

Vue3的生命周期

vue3生命周期函数更改了几个

（1） onBeforeMount

在挂载之前被调用，渲染函数render首次被调用

（2） onMounted

组件挂载时调用

（3） onBeforeUpdate

数据更新时调用，发生在虚拟DOM打补丁之前。

（4） onUpdated

因数据更改导致的虚拟DOM重新渲染和打补丁时调用

（5） onBeforeUnmount

在卸载组件实例之前调用，此阶段的实例依旧是正常的。

（6） onUnmounted

卸载组件实例后调用，调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。

vue2与vue3在生命周期的区别

vue2	vue3
beforeCreate	setup() 开始创建组件之前，创建的是data和method
created	setup()
beforeMount	onBeforeMount 组件挂载到节点上之前执行的函数。
mounted	onMounted 组件挂载完成后执行的函数
beforeUpdate	onBeforeUpdate 组件更新之前执行的函数。
updated	onUpdated 组件更新完成之后执行的函数。
beforeDestroy	onBeforeUnmount 组件挂载到节点上之前执行的函数。
destroyed	onUnmounted 组件卸载之前执行的函数。

到此，关于“vue3生命周期函数更改了几个”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

网页名称：vue3生命周期函数更改了几个
文章出自：http://lszwz.com/article/gdespe.html

乐山网站建设

vue3生命周期函数更改了几个

当前的n值是：{{n}}

当前的n值是：{{n}}

其他资讯

联系我们

135-1821-9792

028-86922220

快捷导航

二维码

友情链接交换友情链接

乐山网站建设

vue3生命周期函数更改了几个

当前的n值是：{{n}}

当前的n值是：{{n}}

其他资讯

联系我们

135-1821-9792

028-86922220

快捷导航

二维码

友情链接 交换友情链接

友情链接交换友情链接