丨 计算属性 computer

• computer 和 methods的区别：
  computer 为响应式，当数据没有发生改变时直接返回该值，而 methods 每次需要执行函数内容，影响效率。

• computer 和 watch 的区别:
  computed 只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据。watch 每次都需要执行函数，watch 更适用于数据变化时的异步操作。

丨 nextTick实现原理

定义: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。（说明：Vue 实现响应式并不是在数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新）

执行顺序

1. 如果支持 Promise 就用 Promise
2. 如果不支持就用 MutationObserver，MutationObserver（它会在指定的DOM发生变化时被调用）
3. 如果不支持 MutationObserver 的话就用 setImmediate（但是这个特性只有最新版IE和node支持，然后是最后一个条件 如果这些都不支持的话就用setTimeout）

丨 Vue3的8种和Vue2的12种组件通信

丨 data为什么是一个函数

保证当组件实例化时能够生成一个新的内存地址

丨 自定义指令（以全局防抖举例）

• 自定义防抖，新建debounce.js

import Vue from 'vue'

Vue.directive('debounce',{
  inserted: function (el, binding) {
    let timer
    el.addEventListener('keyup', () => {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        binding.value()
      }, 1000)
    })
  }
})

• main.js中引入：

import "@/utils/debounce.js"

• 页面中使用：

<el-input v-model="xxx"  v-debounce="方法名">