Vue组件生命周期的三个阶段是什么
这篇文章主要介绍“Vue组件生命周期的三个阶段是什么”,在日常操作中,相信很多人在Vue组件生命周期的三个阶段是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue组件生命周期的三个阶段是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
成都创新互联从2013年开始,先为高淳等服务建站,高淳等地企业,进行企业商务咨询服务。为高淳企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
组件生命周期
生命周期(Life Cycle)是指一个组件从 创建-> 运行-> 销毁的整个阶段,强调的是一个时间段。【相关推荐:vuejs视频教程、web前端开发】
生命周期函数:是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行。
创建阶段
beforeCreate阶段:
我们在初始化事件和生命周期函数时,组件的 props/data/methods尚未被创建,都处于不可用状态。
因为不能使用 props/data/methods 但是我调用了,所有控制台报错。
created阶段:
我们已经初始化好 props、data、methods了,组件的 props/data/methods已创建好。都处于可用状态,但是组件的模板结构尚未完成!
created生命周期函数非常常用,在日常项目开发中经常在它里面调用 methods 中的方法,请求服务器的数据,并且把请求到的数据,转存到 data 中,供 template 模板渲染的时候使用!
test组件--{{nums.length}}
beforeMount阶段:
基于数据和模板,在内存中编译生成HTML结构。将要把内存中编译好的HTML结构渲染到浏览器中。此时浏览器中还没有当前组件的DOM结构。
test组件--{{nums.length}}
mounted阶段:
用内存中编译生成的HTML结构替换掉el属性指定的DOM元素,已经把内存中的HTML结构,成功渲染到了浏览器之中,此时浏览器中已经包含了当前组件的DOM结构。
test组件--{{nums.length}}
vue完成模板解析并把初识的真实DOM元素放在页面后(挂载完毕)调用 mounted。
欢迎学习Vue
运行阶段
所谓运行阶段就是用户与组件产生交互
beforeUpdate阶段:
这个函数的触发的必要前提是,我们修改了 data 里面的数据。将要(注意:仅仅是将要,还没有呢)根据变化过后最新的数据,重新渲染组件的模板结构。
{{message}}
updated阶段:
已经根据最新的数据,完成了组件的DOM结构的重新渲染。注意:当数据变化之后,为了能操作到最新的 DOM 结构,必须把代码写到 updated 生命周期函数中。
{{message}}
销毁阶段
完全销毁一个实例。清理它(vm)与其它实例的连接,接绑它的全部指令及事件监听器。
beforeDestroy阶段:
将要销毁此组件,此时尚未销毁,组件还处于正常工作状态。在这阶段一般做一些首尾工作。
{{message}}
1)销毁后借助Vue开发者工具看不到任何信息。
2)销毁后自定义事件会失效,但原生的DOM事件依然有效
3)一般不会在beforeDestroy操作数据,因为即使操作数据,也不会再触发更新流程了
到此,关于“Vue组件生命周期的三个阶段是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
网站名称:Vue组件生命周期的三个阶段是什么
本文来源:http://pwwzsj.com/article/pccioh.html