VueDay03

1. computed与watch

computed和watch之间的区别与联系：

• computed能完成的功能，watch<font color=red>都可以完成</font>，且通常computed的写法会更简便。

  例如：姓名案例，computed、watch都能完成，但computed写起来，更简单。

• watch能完成的功能，computed<font color=red>不一定能完成</font>。

  例如：还做姓名案例，但要求：名改完1秒钟后，全名再变。

1.1 computed

• 侧重在【算】，核心是：计算出来的值。
• 靠return来输出计算的结果。
• 不能异步计算。

1.2 watch

• 侧重在【监视】，核心是：xxx变了，我要做???事。
• 无需return，靠内部逻辑去完成要做的事。
• 能开启异步任务。

2. 条件渲染

2.1 v-show

1. 语法：v-show="表达式"。
2. 适用于：切换频率较高的场景。
3. 特点：不展示的DOM元素依然在，仅仅是使用样式隐藏掉了，不破坏DOM结构。

2.2 v-if

1. 语法：

   v-if="表达式" 
   v-else-if="表达式"
   v-else
   

2. 适用于：切换频率较低的场景。

3. 特点：不展示的DOM元素直接被移除。

   注意点：

   1. v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
   2. 如果使 用v-if，可能会出现无法获取元素的问题。

3. 列表渲染

3.1 v-for 指令

1. 指令：v-for。
2. 作用：用于遍历数据，生成多个结构。
3. 语法：v-for="(item,index) in xxx" :key="????"。

通俗理解：想生成多个谁，就在谁身上加v-for，别忘了写key。

key的使用原则（同react）：有唯一值就用唯一值（身份证号、手机号、学号......），没有就用索引值。

3.2 详聊 v-for

1. 遍历数组

   <ul>
     <li v-for="(item,index) in arr" :key="index"> {{item}} </li>
   </ul>
   

2. 遍历对象

   <li v-for="(value,key,index) in car" :key="index"> 
     {{value}} - {{key}} - {{index}}
   </li>
   

3. 遍历字符串

   <li v-for="(char,index) in str" :key="index"> 
     {{char}} - {{index}} 
   </li>
   

4. 遍历指定次数

   <li v-for="(number,index) in 10" :key="index"> 
     {{number}} - {{index}}
   </li>
   

5. v-for很健壮，遍历如下内容都不会报错

   <h1 v-for="(a,b) in null">尚硅谷</h1>
   <h1 v-for="(a,b) in undefined">尚硅谷</h1>
   <h1 v-for="(a,b) in '' ">尚硅谷</h1>
   <h1 v-for="(a,b) in true ">尚硅谷</h1>
   

3.3 人员案例

filter.gif

1. 可以使用watch、computed分别去实现一下，发现用computed更简单。
2. 用到了：字符串的includes方法，数组的filter方法。

4. 数据劫持

4.1 何为数据劫持

• 概念：捕获对象属性变化的一种手段，前端的响应式框架通常都会对数据进行劫持，这样当数据发生变化时，可以自动更新相关的视图或执行其他逻辑。

4.2 Vue中的数据劫持

1. 具体实现方式：

   • Vue收集到数据后，会将所有层级的属性，全都改为getter、setter的形式，随后放在_data中。
   • 当_data中的数据放生变化时，对应的setter会执行，在setter中会：①修改数据、②更新界面。

2. 图示：

   
   proxy_set.png

4.3 总结_数据代理 _数据劫持

• 数据代理（简单,vm身上的那点事）：

  1. 目的：让程序员更加方便的读取、修改到_data中属性。
  2. 原理：Object.defineProperty。
  3. 体现：vm身上有_data里的所有属性，且有每一个属性，都有自己的proxyGetter、proxySetter。

  • 当修改vm上的属性时，该属性对应的proxySetter就会调用，去修改_data中对应的属性。
  • 当读取vm上的属性时，该属性对应的proxyGetter就会调用，去读取_data中对应的属性。

• 数据劫持（_data里的那点事）：

  1. 目的：为了实现响应式（什么是响应式？—— 数据变页面自动更新），有了数据劫持，就可以捕获到数据的改变，进而重新解析模板，更新界面。

  2. 原理：Object.defineProperty。

  3. 体现：_data身上的每一个属性不直接给值，都变为：reactiveSetter、reactiveGetter形式。

  • 当修改_data上的属性时，该属性对应的reactiveSetter就会调用。且在reactiveSetter中Vue会：维护数据、更新页面。
  • 当读取_data上的属性时，该属性对应的reactiveGetter就会调用，返回对应的值。

5. Vue中使用函数的原则

• 由Vue所管理的函数，务必写成普通函数，例如：data、methods中的函数、computed中的函数、watch中的函数。
• 不是Vue所管理的函数，最好写成箭头函数，例如：数组方法的回调函数、ajax请求的回调函数、定时器的回调函数、Promise的回调函数等等。

遵循上述两个原则的目的只有一个：让this的指向是vm。

6. 其它指令

1. 我们学过的指令：

   • v-bind : 单向数据绑定, 可简写为 :xxx
   • v-model : 双向数据绑定
   • v-for : 遍历数组/对象/字符串/指定次数
   • v-on : 绑定事件监听, 可简写为@
   • v-if : 条件渲染（动态控制节点是否存在）
   • v-else-if : 条件渲染（动态控制节点是否存在）
   • v-else : 条件渲染（动态控制节点是否存在）
   • v-show : 条件渲染 (动态控制节点是否展示)

v-text

作用：向其所在的节点中渲染文本内容。

与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

v-html

作用：向指定节点中渲染包含html结构的文本。
与插值语法的区别：

1. v-html会替换掉节点中所有的内容，{{xx}}则不会。

2. v-html可以识别html结构。

3. 备注：v-html存在一些安全性问题，因为结构中很有可能包含恶意脚本。

v-once

1. v-once所在节点在初次动态渲染后，就视为静态内容了。
2. 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

v-pre

跳过这个元素和它的子元素的编译过程，一般用在大量不使用Vue语法的结构中。

v-cloak

1. 本质是一个特殊属性，Vue接管容器后，会删掉v-cloak属性。

2. 使用css配合v-cloak可以解决网速慢时，页面展示出{{xxx}}的问题。

7. 收集表单数据

1. 若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
2. 若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
3. 若：<input type="checkbox"/>
   • 没配置input的value属性，那么收集的就是checked（勾选 或 未勾选，是布尔值）
   • 配置了input的value属性：
     • v-model的初始值是非数组，那么收集的就是checked（勾选 或 未勾选，是布尔值）。
     • v-model的初始值是数组，那么收集的就是value组成的数组。