一. 思考题

1.v-show和v-if区别
2.为何v-for要是用key
3.描述vue组件声明周期（父子组件的情况）
4.vue组件间的通讯
5.描述vue组件以及渲染过程
6.双向数据绑定

二.vue基本使用

1.v-html

将表达式当作html解析，类似eval函数

2.computed和watch

（1）computed用于缓存式计算返回结果。依赖变换后才进行计算，否则返回缓存的结果。可用于计算总数，前端分页

（2）watch 用于监听数据变化，再进行后续操作。监听引用类型时，可以进行深度监听，deep设置为true，此时没有oldValue，因为引用类型存放的是堆内存地址，新旧地址都是一样的。

（3）watch使用场景：

监听当前路由，变化时，根据route.matched获取匹配到的路由记录，生成面包屑。
router-view组件也是监听路由变化，根据当前路由渲染，匹配到的vue组件

3.class和style绑定

（1）class和style都属于attribute，可以用v-bind进行绑定：只要通过表达式计算出字符串结果即刻。
（2）vue.js对此做了增强，可以用数组和对象语法进行绑定。

  1. <div :style='[baseStyles,customeStyle]'> </div>

4.条件渲染 v-if 和 v-show

（1）v-if 不会进入dom树中
（2）v-show dom的display是none 存在于dom树中
频繁地切换建议使用v-show，减少性能开销（毕竟要多一步修改dom的操作）

5.列表渲染 v-for和v-if

（1）使用v-for时，尽量使用key，以便vue可以根据key快速对比新旧dom，使用数据业务id，不要使用索引。
（2）vue2中v-for比v-if优先级高，会先遍历再判断，如果存在不需要渲染的元素，这就造成了多余的计算开销。对应的办法是，先过滤数据再进行遍历。

6.事件处理

vue事件会直接绑定到元素身上
（1）event参数是原生dom事件
（2）传了自定义参数后，还想拿到原生dom事件，可以将$event参数传入处理函数中
event.target是触发事件的元素，event.currentTarget指绑定处理函数的元素。
（3）事件修饰符
.prevent阻止默认行为
.stop阻止事件冒泡
.self只有当event.target是本身时出发处理函数
@keyDown.enter enter键触发事件

7.表单绑定输入

（1）v-model对原生html元素进行绑定
v-model可以根据不同表单元素采取对应方法来更新元素
原理：监听用户输入事件并更新数据。v-model会忽略元素value，selected，checkted等attritute的初始值，并将vue实例中数据作为表单元素的数据来源。
（2）修饰符
v-model.lazy 数据会在change事件后更新
v-model.number 输入的值会自动转化为数字类型
v-model.trim 自动去掉空格符
（3）自定义组件使用model
v-model用在组件上时，会默认使用value attribute，监听input事件。
关键在于组件model配置：指定绑定父组件通过v-model绑定的attritute名称（记得props中声明具体prop来接受传递的数据）；绑定监听输入的事件。

8.v-model详细讲解


v-model作用：

（1）用于原生表单元素时：
忽略元素原始value，selected，checkted等attribute初始值，将vue实例数据作为元素数据来源，监听元素输入事件，并更新vue实例数据。
（2）用于自定义组件上时：
默认绑定value自定义attribute传递父组件数据，并绑定input事件接受参数来更新自身数据。
指定父组件绑定的attribute和事件，可以子组件中修改model配置项实现。

语法糖：

1.vue2中v-model使用：

（1）在原生表单元素上使用v-model
  1. <input v-model='username' />
  2. //等价于
  3. <input v-bind:value='usernae' v-on:input='username = $event'> 
  4. // $event是自组件通过事件抛出的参数

（2）在自定义组件上使用v-model
  1. <custome-input v-model='username'>
  2. //等价于
  3. <custome-input v-bind:value='username' v-on:input='username = $event'>

（3）vue2.2后，可通过配置子组件model选项来自定义用于v-model的prop和事件
  1. export default {
  2.   model: {
  3.     prop: 'title',
  4.     event: 'change'
  5.   },
  6.   props: {
  7.     // 这将允许 `value` 属性用于其他用途
  8.     value: String,
  9.     // 使用 `title` 代替 `value` 作为 model 的 prop
  10.     title: {
  11.       type: String,
  12.       default: 'Default title'
  13.     }
  14.   }
  15. }

2.vue3中使用v-model用于自定义组件上时，默认绑定modelValue的prop，并监听update:modelValue事件

（1）默认绑定modelValue属性，并监听update:modelValue事件
  1. <ChildComponent v-model="pageTitle" />
  3. <!-- 是以下的简写: -->
  5. <ChildComponent
  6.   :modelValue="pageTitle"
  7.   @update:modelValue="pageTitle = $event"
  8. />

（2）可以通过向v-model传递一个参数来替代model选项
  1. <ChildComponent v-model:titleValue="pageTitle" />
  3. <!-- 是以下的简写: -->
  5. <ChildComponent
  6.   :titleValue="pageTitle"
  7.   @update:titleValue="pageTitle = $event"
  8. />

9.异步加载组件

在用到组件时，加载模块文件。
引入组件时，用函数返回import函数：()=> import(‘./index.vue’)

10.缓存组件

涉及频繁切换场景，使用keepalive，可以缓存不活动的组件实例且保留组件状态并且可以避免反复渲染，被包裹的组件有activated和deactivated生命周期

  1. <keep-alive>
  2.   <index1 v-if='state' />
  3.   <index2 v-if='state' />
  4.   <index3 v-if='state' />
  5. </keep-alive>

11.mixin

公共逻辑抽取与复用
mixin的配置项会合并到vue实例中，遇到同名属性时，vue实例原有属性优先级高于mixin配置
缺点：数据来源不明确，难以阅读；多个mixin可能遇到同名属性产生覆盖

12.directives

操作原生dom，有不周期函数。
用户权限控制

  1. function checkPermission (el, binding) {
  2.   // 获取绑定的值，此处为权限
  3.   const { value } = binding
  4.   // 获取所有的功能指令
  5.   const points = store.getters.userInfo.permission.points
  6.   // 当传入的指令集为数组时
  7.   if (value && value instanceof Array) {
  8.     // 匹配对应的指令
  9.     const hasPermission = points.some((point) => {
  10.       return value.includes(point)
  11.     })
  12.     // 如果无法匹配，则表示当前用户无该指令，那么删除对应的功能按钮
  13.     if (!hasPermission) {
  14.       el.parentNode && el.parentNode.removeChild(el)
  15.     }
  16.   } else {
  17.     // eslint-disabled-next-line
  18.     throw new Error('v-permission value is ["admin","editor"]')
  19.   }
  20. }
  22. export default {
  23.   // 在绑定元素的父组件被挂载后调用
  24.   mounted (el, binding) {
  25.     checkPermission(el, binding)
  26.   },
  27.   // 在包含组件的 VNode 及其子组件的 VNode 更新后调用
  28.   update (el, binding) {
  29.     checkPermission(el, binding)
  30.   }
  31. }