vue高级特性

---

highlight: a11y-light theme: channing-cyan

---

一、自定义v-model

（1）概念： - v-model可以看成是value+input方法的语法糖。

• 组件的v-model就是value+input方法的语法糖。

• 可以绑定v-model的有：input，checkbox，select，textarea，radio  （2）如何实现自定义v-model，详细附代码
  父组件：

子组件：

二、$nextTick

• Vue是异步渲染
• 异步渲染：vue的data改变之后，DOM不会立刻渲染
• $nextTick会在DOM渲染之后被触发，以获取最新DOM节点

三、slot

在此只针对具名插槽和作用域插槽示例：
具名插槽： 有具体名字的插槽,使用时指定替换模板中哪个插槽的内容，需要多个插槽时，可以利用<slot> 元素的一个特殊的特性：name来定义具名插槽

作用域插槽： 可以理解为子组件中的作用域插槽可以为父组件中的插槽的显示提供数据
父组件：

子组件：

四、动态组件

• :is = "component-name" 用法
• 需要根据数据，动态渲染的场景。即组件类型不确定

五、vue如何异步加载组件

• import()函数
• 按需加载，异步加载大组件

六、vue如何缓存组件 keep-alive

• 缓存组件
• 频繁切换，不需要重复渲染
• Vue常见性能优化

七、mixin

• 多个组件有相同的逻辑，抽离出来

• mixin并不是完美的解决方案，会有一些问题

  • 变量来源不明确，不利于阅读
  • 多mixin可能会造成命名冲突
  • mixin和组件出现多对多的关系，复杂度较高

• vue3提出的Composition API旨在解决这些问题 MixinDemo.vue：

mixin.js