Vue生命周期
beforeCreate
() {} : 创建实例前, 此时的作用是初始化Vue实例, 进行数据观测。
Created
() {} : 创建实例后,此时的作用是初始化data中的数据以及methods。
Create->beforeMount
: 判断是否存在el对象,若不存在需要调用vm.$mount(el)才会继续编译,之后在判断是否有template(模板) :
- 如果有则将template转换为render函数,通过render函数去渲染创建dom
- 如果没有则将el外部的HTML作为template编译
编译模板的作用:把data对象中的数据和vue语法写的模板编译成HTML
beforeMount
() {} : 挂载前,开始挂载编译生成的HTML,并将vm.$el(编译好的HTML)替换掉el属性所指向的dom对象,但此时还未将编译好的HTML渲染到页面上。
Mounted
() {} : 挂载后,此时已经挂载完成,dom已经渲染到页面,之前的挂载点以及内容会被替换为新的dom。
beforeUpdate
() {} : 更新前,更新数据,但是更新的数据必须是渲染在模板上的(el、templater、render之一),虚拟dom重新渲染,但此时页面还未更新。
Update
() {} : 更新后,页面已经与data数据保持同步,如果在Update中需要再次修改数据,则会再次触发更新方法(beforeUpdate、Update)。
beforeDestroy
() {} : 销毁前,此时vue已经从运行阶段进入到销毁阶段,但其中的data,methods等依然可用,还未真正的执行销毁过程。
Destroy
() {} : 销毁后,此时组件已经完全销毁,data,methods等已经不可用了。
v-if与v-show的区别
v-show
某种意义上来说称之为“条件隐藏”
。也就是浏览器先把HTML元素全都渲染,然后再来判断,符合条件的就显示,不符合条件的就隐藏。虽然不符合条件的元素被隐藏了,但是它依然在,只是没有显示罢了。
v-if
是真正的“条件渲染”
,浏览器先判断是否符合条件,符合的就渲染,不符合的就不渲染dom,在浏览器中自然而然也就找不到这个dom了。