vue高级特性

一、自定义v-model

<VModel v-model="value"></VModel>

<template>
  <input type="text" :value="val" @input="$emit('change', $event.target.value)">
</template>
<script>
  export default {
    name: "vModel",
    model: {
      prop: 'val',
      event: 'change'
    },
    props: {
      val: String,
      default: () => {
        return ''
      }
    }
  }

二、$nextTick

vue会是异步渲染，$nextTick会在dom渲染之后，拿到最新的dom节点

三、插槽

用于父组件向子组件里插入内容

1、基本使用

2、作用域插槽

父组件通过v-slot使用子组件的变量

3、具名插槽

四、动态异步组件

组件比较大，使用频率不高，可以使用异步加载，可以优化性能

五、keep-alive

缓存组件--使用场景：频繁切换，不需要重复渲染（tab切换）

六、mixin

使用场景:  多个组件有相同逻辑的时候，抽离出来

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

              vue3提出的Composition API旨在解决这些问题

问题：变量来源不明确，不利于阅读

         多mixin可能会引起命名冲突

        mixin和组件可能会出现多对多的关系，复杂度较高