vue面试（二）

vue高级特性

1. 自定义v-model; 详解；https://www.cnblogs.com/fsg6/p/14469150.html

2. this.$nextTick

vue是异步渲染，data改变后，Dom不会立刻渲染，
$nextTick会在DOM渲染之后被粗发，已获得最新的dom节点

<template>
  <div id="app">
    <ul ref="ul1">
        <li v-for="(item, index) in list" :key="index">
            {{item}}
        </li>
    </ul>
    <button @click="addItem">添加一项</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
      return {
        list: ['a', 'b', 'c']
      }
  },
  methods: {
    addItem() {
        this.list.push(`${Date.now()}`)
        this.list.push(`${Date.now()}`)
        this.list.push(`${Date.now()}`)

        // 1. 异步渲染，$nextTick 待 DOM 渲染完再回调
        // 3. 页面渲染时会将 data 的修改做整合，多次 data 修改只会渲染一次
        this.$nextTick(() => {
          // 获取 DOM 元素
          const ulElem = this.$refs.ul1
          // 如果没加$nextTick,点击第一次，li的节点是3个（为何不是6个），因为dom是异步渲染，data数据改变不会立刻渲染
          console.log( ulElem.childNodes.length )
        })
    }
  }
}
</script>

3. slot 基本使用，作用域插槽，具名插槽, 详情：https://www.cnblogs.com/fsg6/p/14469648.html

4.动态组件详情：https://www.cnblogs.com/fsg6/p/14469861.html

5. 异步组件按需加载；详情；https://www.cnblogs.com/fsg6/p/14470002.html

6.keep-alive缓存组件；详情；https://blog.csdn.net/weixin_41819098/article/details/89379734

https://www.cnblogs.com/mary-123/p/11248178.html

activated 当keepalive包含的组件再次渲染的时候触发
deactived 当keepalive包含的组件销毁的时候触发
keepalive可以接收三个属性作为参数进行匹配对应的组件进行缓存
include 包含的组件
exclude 排除的组件
max 缓存组件的最大值
其中include,exclude可以为字符，数组，以及正则表达式max类型为字符或者数字

7. mixin混合，多个组件有相同逻辑，抽离出来，详情：https://www.cnblogs.com/fsg6/p/14470807.html