Vue常用的指令，v-if和v-show的区别，Vue的生命周期

在这里插入代码片

前言

一、vue常用的指令？

常用指令
在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令，指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值，框架会进行相关DOM操作的绑定。

vue中的指令有很多，我们平时做项目常用的有：

v-text 解析文本 v-html 解析html标签 v-if：是动态的向DOM树中添加或者删除元素；

v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用
v-show：是通过标签的CSS样式display的值是不是none，控制显示隐藏 区别： 1、当条件为真的时候 没有区别 当条件为假的时候
v-if通过创建或删除DOM节点来实现元素的显示隐藏，v-show通过css中的display属性来控制
2、v-if更适合数据的筛选和初始渲染 v-show更适合元素的切换 v-for：
v-for是根据遍历数】；据来进行渲染，要配合key使用。要注意的是当v-for和v-if同处于一个节点时，v-for的优先级比v-if更高。这意味着v-if将运行在每个v-for循环中
v-on：用来绑定一个事件或者方法，简写方式是@click="" v-bind：
v-bind用来动态的绑定一个或者多个属性。没有参数时，可以绑定到一个包含键值的对象。常用于动态绑定class和style。以及href等。简写的方式是“:属性名=""”一个冒号
v-model 只能适用于在表单元素上，可以实现数据双向绑定 ，

二、v-if和v-show的区别

1.相同点

都可以控制dom元素的显示和隐藏

2.不同点

1.区别:

v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;

v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的

2.性能对比

v-if有更高的切换消耗； v-show有更高的初始渲染消耗

3.编译条件

v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);
v-show 是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且 DOM 元素保留；

4.使用场景

v-if适合运营条件不大可能改变的场景下；
v-show适合频繁切换；

三、vue的生命周期？

生命周期让我们在控制整个vue时更容易形成更好的逻辑，可以分为四个阶段:创建阶段，挂载阶段，更新阶段，销毁阶段

分别有：

创建前：beforeCreate() 只有一些实例本身的事件和生命周期函数
创建后：Created() 是最早使用data和methods中数据的钩子函数 开始创建组件之前，创建的是data和method
挂载前：beforeMount() 指令已经解析完毕，内存中已经生成dom树
挂载后：Mounted() dom渲染完毕页面和内存的数据已经同步
更新前：beforeUptate()当data的数据发生改变会执行这个钩子，内存中的数据是新。的，页面是旧的
更新后：Updated() 内存和页面都是新的
销毁前：beforeDestroy() 即将销毁data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作
销毁后：Destroyed() 已经销毁完毕

下边有图片可以参考理解: