Vue梳理

Vue梳理

---

1、基本使用

1.1、模板显示——双花括号

{ {里面的内容会显示}}

1.2、vue配置项

1、computed与watch的差别（高频）

computed：是因为多个数据的变化而导致一个数据的变化，我们就会放到computed里去计算数据的值，并且这个数据还会进行缓存，将来再重复使用这个值的时候不再需要重新计算，直接获取缓存的值就可以。

watch：对属性的变化进行监听，它会因为一个值的变化而要导致一系列的操作，比如说下标发生了变化，数据需要进行刷新。执行一个动作去请求数据刷新页面中的dom结构。

1.3、class和style的绑定方式

字符串：表达式的运算结果就是 class 和 style 的写法

数组：将数组中的多个值合并在一起。组成相对应的 class 和 style

对象：class 写成对象，key值就是你的 class 的名字，value值为true或false，为ture就拥有 class 的名字，false则没有 class 的名字；style 写成对象的形式，key值是属性的名字，value是属性的值

1.4、条件控制（高频）

1、v-if与v-show的差别

先说：

v-if：是控制标签是否存在于dom结构当中，来去控制标签是否显示在页面上。
v-show：是通过标签的display样式来，去控制标签是否显示在页面上。

紧接着：

v-if有更高的切换开销，为什么有更高的切换开销？因为v-if的取值从true和false的变换当中，这个标签就会跟着创建和销毁反反复复，我们都知道js创建dom结构，开销比较大的；
v-show它没有去销毁标签，它是控制标签的display的属性设置，当为false的时候仅仅在dom结构中看不到标签。v-show仅仅是有更高的初始化开销而已。
***什么是初始化开销？***比如v-show开始的时候为false，那实际上我并不希望创建这个标签，但是这个标签同样需要被创建，只不过创建好后要把样式设置为display为none，让它隐藏起来，所以哪怕不用，初始化的时候也要创建，所以它的初始化开销更高

最后

在项目的开发当中，我们需要合理的使用v-show和v-if，根据场景的不同，来去选择这两个指令来去使用。这样我们也可以提升vue项目的性能。

1.5、循环v-for（key）（高频）

1、如何提高列表渲染的性能？

给每一个遍历出来的来设置key值，并且key值必须是这组数据或者是这个结构的唯一标识，不能跟其它的兄弟元素冲突了。这样就能提高v-for对于列表渲染的性能

2、key值是如何提升列表渲染性能的？

/*
 * 比如有一组数据arr = [a,b,c,d,e]
 * 遍历出来  a  b  c  d  e
 * key      0  1  2  3  4
 * 情景一：不设置 key 值，默认使用 index 作为 key
 *
 * 操作：
 * 在中间对数组进行切割操作 arr.splice(2,1)
 * 这样数组变成了：[a,b,d,e]
 *                       0                  1        2           3
 * 情景一结果：重新渲染的  a(下标未变进行复用)  b(复用)  d(重新创建)  e(新建)
 */


/*
 * 解决方案：情景二：不使用默认的 index 作为 key 值，而是使用唯一的标识作为 key 值
 * 一般情况下后台提供的数据都有唯一标识，如果没有可以自己构建这样的唯一标识。
 * 比如有一组数据
 arr = [
 	{value:a,id:001},
 	{value:b,id:002},
 	{value:c,id:003},
 	{value:d,id:004},
 	{value:e,id:005}]
 * 渲染的内容  a    b    c    d    e
 * key        001  002  003  004  005
 *
 * 操作：
 * 在中间对数组进行切割操作 arr.splice(2,1)
 * 这样数组变成了：
 *  arr = [
 	{value:a,id:001},
 	{value:b,id:002},
 	{value:d,id:004},
 	{value:e,id:005}]
 * 重新渲染：
 *                       001                 002     004      005
 * 情景二结果：重新渲染的  a(下标未变进行复用)  b(复用)  d(复用)  e(复用)
 */

1.6 、事件

v-on、@、修饰符、传参,$event

1.7、表单的绑定(v-model)

1、单行文本输入框

<input v-model="message" placeholder="edit me">
<p>Message is: {
  { message }}</p>