0. 指令、插值

• 插值、表达式
• 指令、动态属性

• v-html：会有XSS风险，会覆盖子组件

  
  
  image.png
  
  
  image.png

00. computed 和 watch

image.png

image.png

image.png

000. class 和 style

image.png

image.png

image.png

1. v-show 和 v-if 的区别？

区别：
v-show 的显示与隐藏，只是在设置为 display: none
v-if 的显示与隐藏，会创建和销毁 DOM 节点
应用场景：
如果只有一次的显示或隐藏，用 v-if；
如果有多次显示或隐藏的切换，用 v-show

image.png

2. 为何 v-for 中要用 key?

3. 描述 Vue 组件生命周期 （有父子组件的情况）

生命周期（单个组件）

• 挂载阶段
  created 与 mounted 的区别？
  created 页面还没有渲染，但是 Vue 实例已经初始化完了
  mounted 页面已经渲染完了
• 更新阶段
• 销毁阶段
  
  lifecycle.png
  
  生命周期（父子组件）
  
  image.png

image.png

image.png

4. Vue 组件如何通讯？

• 父组件 向 子组件传递参数，props
• 子组件 向 父组件触发一个事件，this.$emit
• 兄弟组件之间的通信，自定义事件

// event.js
import Vue from 'vue';
export default new Vue();
// list.vue
import event from './event'
// 调用自定义事件
event.$emit('onAddTitle', this.title)
// 绑定自定义事件
event.$on('onAddTitle', this.addTitleHandler)
// 解绑自定义事件（避免造成内存泄露）
event.$off('onAddTitle', this.addTitleHandler)

【注】beforeDestroy 可能可以执行哪些事情：可以解绑自定义事件，还有就是注意，子组件调用父组件事件，用 this.$emit；而调用自定义事件，用 event.$emit

5. 描述组件渲染和更新的过程？

6. 双向数据绑定 v-model 的实现原理？

7. v-for 与 v-if 不能一起用？

v-for 比 v-if 计算优先级高一些，会影响性能。

8. event 参数？

• even 是原生的
• 事件被挂载到当前元素

9. 事件、按键修饰符有哪些？

image.png

image.png

10. 表单

https://zhuanlan.zhihu.com/p/107502613

<input type="text" v-model.trim="name"/> //截取前后的空格
<input type="text" v-model.lazy="name"/> //输入过程中不会变化
<input type="text" v-model.number="name"/> //转换为数字

<input type="checkbox" v-model="check" /> //复选框也是用v-model check是布尔值

<input type="checkbox" id="jack" value="Jack" v-model="checkbox" />
<label for="jack">Jack</label> // checkbox 是数组 []，多选框
<input type="checkbox" id="john" value="john" v-model="checkbox" />
<label for="john">john</label>

<input type="radio" id="male" value="male" v-model="gender" />
<label for="jack">男</label> // checkbox 是值，单选框
<input type="radio" id="female" value="female" v-model="gender" />
<label for="john">女</label>

<textarea v-model="desc"></textarea>
<! 注意，<textarea>{{desc}}</textarea> 是不允许的！>

// 下拉列表选择（单选）selected 是值
<select v-model="selected">
    <option disabled value="">请选择</option>
    <option disabled>A</option>
    <option disabled>B</option>
    <option disabled>C</option>
</select>

// 下拉列表选择（多选）selectedList 是数组 []
<select v-model="selectedList" multiple>
    <option disabled value="">请选择</option>
    <option disabled>A</option>
    <option disabled>B</option>
    <option disabled>C</option>
</select>

11. Vue 的高级特性

• 自定义 v-model（颜色选择器）

index.vue

image.png

image.png

CustomVModel.vue

image.png

image.png

• $nextTick
  为什么要用 nextTick?
  

  image.png
  
  
  image.png

• refs
  获取DOM元素的方式

  
  
  image.png
  
  
  image.png

• slot

  
  
  image.png

基本使用

image.png

image.png

SlotDemo

image.png

作用域插槽

image.png

image.png

ScopeSlotDemo

image.png

具名插槽

image.png

image.png

• 动态、异步组件
  动态组件
  
  image.png

image.png

image.png

异步加载组件（性能优化）

image.png

image.png

• keep-alive（缓存组件）

  
  
  image.png
  
  
  image.png
• mixin
  
  image.png
  
  index.vue
  
  image.png
  
  MixinDemo
  
  image.png
  
  
  image.png
  
  mixin.js
  
  image.png

存在问题

image.png

12. v-show 与 keep-alive 的区别？

v-show：通过原生CSS（display:none）进行控制（渲染）；在比较简单的情况下，即标签不是很多的情况下，可用 v-show进行控制（渲染）
keep-alive：在Vue层级（框架层级）进行渲染；组件较多的情况下，如 tab 切换等情况下，用 keep-alive 比较合适
一个组件，即一个 js 对象

13. vuex 使用

image.png

基本概念

image.png

用于 vue 组件

image.png

image.png

应用场景

• 多个视图依赖于同一状态（例如：菜单导航）
• 来自不同视图的行为需要变更同一状态（例如：评论弹幕）

13. Vue-router 使用

image.png

image.png

H5 history 路由模式配置

image.png

Vue-router 路由配置 动态路由

image.png

Vue-router 路由配置 懒加载

image.png

注意

image.png

14. 路由跳转有几种方式？

• router-link

<router-link to="keyframes">点击验证动画效果 </router-link>

• this.$router.push()
  描述：跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。
• this.$router.replace()
  描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。
• this.$router.go(n)
  相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面