整理一下自己在项目中用到的一些Vue高级特性

自定义v-model

这个在之前的一篇博客中写过， 这里就不重复了，链接地址是在vue自定义组件中使用v-model

$nextTick

1. vue是异步渲染
2. data改变之后，DOM不会立刻渲染
3. $nextTick会在DOM渲染之后被触发，以获取最新的DOM节点
4. 页面渲染时会将data的修改做整合，多次data修改只会渲染一次

上代码示例

<template>
    <div>
        <ul ref="ul1">
            <li v-for="(item,index) in list" :key="index">
                {{item}}
            </li>
        </ul>
        <button @click="add">add</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: ['a', 'b', 'c']
        }
    },
    methods: {
        add() {
            this.list.push(`${Date.now()}`)
            this.list.push(`${Date.now()}`)
            this.list.push(`${Date.now()}`)
            // 异步渲染  $nextTick等待dom渲染完成后执行
            // 页面渲染时将会对data的修改做整合，多次data修改只会修改一次
            this.$nextTick(() => {
                const ul1 = this.$refs.ul1
                console.log(ul1.childNodes.length)
            })
        }
    }
}
</script>
复制代码

什么时候用？

1. 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。为什么呢？原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题。

2. 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

keep-alive

1. 被keep-alive包裹住的组件会被缓存
2. 频繁切换，不需要重复渲染

上代码示例

<template>
    <div>
        <keep-alive>
            <template v-if="data === 'c'">
                <c /> 
            </template>
            <template v-if="data === 'd'">
                <d />
            </template>
        </keep-alive>
        <button @click="handle">提交</button>
    </div>
</template>
...
复制代码

什么时候用？

举个例子，当一个页面上有好多tab。再来回点击这些tab的时候，Vue都会创建一个新的实例。有些时候，项目会要求你保持这些tab组件的状态，这个时候就可以选择用keep-alive。

mixin

mixin是一个JS对象，它可以包含我们组件中任意功能选项，如data、components、methods、created、computed等等。

我们只要将共用的功能抽离出来，以对象的方式传入mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来。

在Vue中我们可以局部混入跟全局混入

上代码示例

局部混入

定义一个mixin对象，有组件options的data、methods属性。

var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}
复制代码

组件通过mixins属性调用mixin对象

Vue.component('componentA',{
  mixins: [myMixin]
})
复制代码

该组件在使用的时候，混合了mixin里面的方法，所以会在执行create生命钩子是自动执行hello方法

全局混入

通过Vue.mixin()进行全局的混入

Vue.mixin({
  created: function () {
      console.log("全局混入")
    }
})
复制代码

！！！请谨慎使用全局混入，因为它会影响到每一个组件实例，包括第三方组件！！！

注意点

1. 多mixin可能会造成命名冲突
2. 当组件存在与mixin对象相同的选项的时候，进行递归合并的时候组件的选项会覆盖mixin的选项
3. 相同选项为生命周期钩子的时候，会合并成一个数组，先执行mixin的钩子，再执行组件的钩子

什么时候用？

举个例子，在同一个页面有一个弹窗和提示框，这两个组件的内部都是通过isShowing来控制显示。这样我们就可以把isShowing抽离出来，编写一个mixin。弹窗组件和提示框组件到时候只需要局部引入就可以了。