Vue的生命周期以及v-if与v-show的区别

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了。