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


这篇文章主要介绍“vue3生命周期函数更改了几个”,在日常操作中,相信很多人在vue3生命周期函数更改了几个问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue3生命周期函数更改了几个”的疑惑有所帮助!接下来,请跟着小编一起来学习吧! vue3改了4个生命周期函数。Vue3组合式api取消了beforeCreated和created钩子函数,采用steup钩子代替,且里面不能使用this。Vue3里面的组件销毁的钩子函数由destroyed和beforeDestroy换成了beforeUnmount和unmounted。Vue实例有一个完整的生命周期,也就是从new Vue()、初始化事件(.once事 件)和生命周期、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等⼀系列过程,称这是Vue的生命周期。vue应用程序中有4个主要事件(8个钩子):创建 —- 在组建创建时执行
挂载 —- DOM被挂载时执行
更新 —- 当响应数据被修改时执行
销毁 —-在元素被销毁之前立即执行Vue2的生命周期(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 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务端渲染期间不被调用。

html>
	
		分析生命周期

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

相关推荐: es6 class是不是语法糖

这篇文章主要介绍了es6 class是不是语法糖的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇es6 class是不是语法糖文章都会有所收获,下面我们一起来看看吧。 class是语法糖。原因:class是基于原型继承的实现,对语言…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 03/08 12:22
下一篇 03/08 12:22

相关推荐