vue生命周期

忘是亡心i 2021-12-15 03:05 339阅读 0赞

1. vue的实例方法vm.$mount(),   和 new Vue的参数el作用一样。

![1524016-20190111154052947-1643643108.png][]

2. template：模板，是一个含有dom元素的字符串。它会替换掉el或者mount的挂载元素。

过程是这样的：

1  vue会把这个template字符串解析成为抽象语法树（AST(是一个对象)），

2  然后把这个对象传入到render函数中，得到虚拟节点VNode,

3 最后才将虚拟dom变成真实dom

3  new Vue（）后，如果存在render函数，就会走render函数，创建dom，不会走template，有template，就会忽视el。

三者的权重关系   render >  template  >  el;

4.  vue实例的生命周期：

`beforecreated`：`el`和`data` 并未初始化   
`    created`:完成了 `data`数据的初始化，`el`没有 ，适合发送数据请求  
`    beforeMount`：完成了 `el` 和 `data` 初始化   
`    mounted` ：完成挂载

beforeupdate是在更新数据之后，还没有渲染的时候执行的，你在这里操作数据，就会再次执行beforeupdate成死循环了.数据操作都是在                        methods里面操作。这里只用来操作dom

![1524016-20190112101637330-266347380.png][]

转载于:https://www.cnblogs.com/dangdanghepingping/p/10257163.html

[1524016-20190111154052947-1643643108.png]: /images/20211214/b378eab2b4674006a0609e4a137a2241.png
[1524016-20190112101637330-266347380.png]: /images/20211214/962957abc7dd4cb9a626442819560ad6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，339人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue生命周期

Vue把整个生命周期划分为创建、挂载、更新、销毁等阶段，每个阶段都会给一些“钩子”让我们来做一些我们想实现的动作。学习实例的生命周期，能帮助我们理解vue实例的运作机制，

左手的ㄟ右手/ 2022年05月29日 08:06/ 0 赞/ 280 阅读

相关 Vue生命周期

它可以总共分为8个阶段： beforeCreate（创建前）, created（创建后）, beforeMount(载入前), mounted（载入后

迈不过友情╰/ 2022年05月14日 05:04/ 0 赞/ 248 阅读

相关 vue 生命周期

1/ beforeCreate() 在创建Vue对象之前；用途动画加载 2/ created() 组件（Vue的实例化对象）创建好了，属性也绑定了，但是DOM还没生成；用

港控/mmm°/ 2022年04月22日 14:30/ 0 赞/ 202 阅读

相关 Vue生命周期

生命周期每个 Vue 实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue

迈不过友情╰/ 2022年02月19日 18:13/ 0 赞/ 330 阅读

相关 Vue 生命周期

/\ \ @version: V.1.0.0.1 \ @Author: fenggang \ @Date: 2019-06-18 19:38:19 \ @LastEdi

浅浅的花香味﹌/ 2021年12月17日 12:45/ 0 赞/ 338 阅读

相关 vue生命周期

1. vue的实例方法vm.$mount(), 和 new Vue的参数el作用一样。 ![1524016-20190111154052947-1643643108.pn

忘是亡心i/ 2021年12月15日 03:05/ 0 赞/ 340 阅读

相关 vue生命周期

总览 ![331769-20180909094731362-16918169.png][] vue的生命周期可简单的从上边这张图了解，红圆角矩形就是生命周期函数相应

ゞ浴缸里的玫瑰/ 2021年12月12日 07:37/ 0 赞/ 434 阅读

相关 VUE生命周期

\[vue实例的生命周期\](https://cn.vuejs.org/v2/guide/instance.html \实例生命周期) \+ 什么是生命周期：从Vue实例

左手的ㄟ右手/ 2021年12月09日 02:23/ 0 赞/ 404 阅读

相关 vue生命周期

![1532051-20190122110516667-999443411.png][] 1.参考：[https://segmentfault.com/a/119

﹏ヽ暗。殇╰゛Y/ 2021年10月01日 05:06/ 0 赞/ 452 阅读

相关 VUE生命周期

[【Vue】详解Vue生命周期][Vue_Vue] 正文 Vue实例的生命周期全过程（图） ![1060770-20170716220427050-1577910

朴灿烈づ我的快乐病毒、/ 2021年09月16日 01:22/ 0 赞/ 509 阅读