Vue-高级知识

// vue3 新特性
1. <div :[name]="msg" @[event]="handleEvent"></div> // 动态属性 key 和 val，都是 data 内定义的内容
2. 子组件通过 $attrs 可以获取到父组件传递过来的属性，在非 props 特性中常用到 // 非 props 特性看基础知识
3. 可以直接给子组件上写 'class'，对应的样式会生效
4. 如何改变引用类型的数据内容？
  1. 数组
    1. 使用数组自带的方法，如：push、pop、shift、unshift
    2. 改变数组引用，即使用新数组
    3. 直接更新指定数组的内容，如：this.arr[1] = 'chenj' // 在 vue2.x 中需使用 $set，不可直接改变
  2. 对象
    1. 改变对象引用，即使用新对象
    2. 直接新增对象内容，如：this.obj.name = 'chenj' // 在 vue2.x 中需使用 $set，不可直接新增
5. 绑定多个事件：<button @click="handleClick1(), handleClick2()">按钮</button>
6. 修饰符
  1. 事件修饰符：stop、prevent、capture、self、once、passive
  2. 按键修饰符：enter、tab、delete、esc、up、down、left、right // 键盘按了对应的按键才会触发
  3. 鼠标修饰符：left、middle、right // 对应鼠标按键
  4. 精确修饰符：exact // 只有按下对应的按键且没有按其他的按键才会触发
7. v-modle
  1. 在 radio 中对应多个选项，每个都需要绑定同一个数据，且 value 是不一样的，绑定的数据是基础类型，如字符串
  2. 在 checkbox 中对应多个选项，每个都需要绑定同一个数据，且 value 是不一样的，绑定的数据的引用类型，如数组
  3. 在 checkbox 中对应单个选项，即表示是否勾选时，默认勾选时 true，不勾选是 false，可以通过 true-value 和 false-value 改变默认值
    <input type="checkbox" v-model="msg" true-value="yes" false-value="no" />
8. 父子组件传值
  1. 通过 v-bind 传递父组件的参数
    <erzi v-bind="params"></erzi> // params = { a: 1, b: 2, c: 3}，相当于传递了一个对象
    在子组件的 props 中接收 a、b、c
  2. 父组件传递参数时使用 id-num 语法，子组件接收使用 idNum 语法，一个使用 -，一个使用大写
  3. 非 props 特性
    1. 在子组件中使用 inheritAttrs: false，表示不接收父组件传递过来的属性，即不会在 html 标签上展示对应的属性
    2. 在子组件中使用 <div v-bind="$attrs"></div> 表示将父组件传递过来的所有属性都放在 div 这个标签上
    3. 在子组件中使用 $attrs 可以获取到父组件传递过来的属性
9. 在子组件中使用 emits: ['event1'] 表示这个组件向外触发了一个事件名是 event1 的事件，如果触发的事件名和定义的不一致会报警告
   也可以使用对象形式，可以对触发事件的参数做校验，如果不符合会报警告
   emits: {
    event1: agrs => {
       if (agrs < 0) {
         return false
       }
       return true
      }
   }
10. 实现 v-model
  // 父组件
  const app = Vue.createApp({
    data() {
      return {
        count: 1
      }
    },
    template: '<counter v-model="count" />'
  })
  // 子组件
  app.component('counter', {
    props: ['modelValue'], // 必须使用 modelValue
    methods: {
      handleClick() {
        this.$emit('update:modelValue', this.modelValue + 1)
      }
    },
    template: '<div @click="handleClick">{{ modelValue }}<div/>'
  })
11. 多个 v-model
  // 父组件
  const app = Vue.createApp({
    data() {
      return {
        count1: 1,
        count2: 2
      }
    },
    template: '<counter v-model:count1="count1" v-model:count2="count2" />'
  })
  // 子组件
  app.component('counter', {
    props: ['count1', 'count2'],
    methods: {
      handleClick1() {
        this.$emit('update:count1', this.count1 + 1)
      },
      handleClick2() {
        this.$emit('update:count2', this.count2 + 1)
      }
    },
    template: `
      <div @click="handleClick1">{{ count1 }}<div/>
      <div @click="handleClick2">{{ count2 }}<div/>
    `
  })
12. v-modle 自定义修饰符
  // 父组件
  const app = Vue.createApp({
    data() {
      return {
        count: 'a'
      }
    },
    template: '<counter v-model.uppercase="count" />'
  })
  // 子组件
  app.component('counter', {
    props: {
      modelValue: String,
      modelModifiers: { // 接收自定义修饰符
        default() {
          return {}
        }
      }
    }
    mounted() {
      console.log(this.modelModifiers) // uppercase
    },
    methods: {
      handleClick() {
        let newValue = this.modelValue + 'a'
        if (this.modelModifiers.uppercase) {
          newValue = newValue.toUpperCase()
        }
        this.$emit('update:modelValue', newValue)
      }
    },
    template: '<div @click="handleClick">{{ modelValue }}<div/>'
  })
13. 异步组件
  // 父组件
  const app = Vue.createApp({
    template: '<async-component />'
  })
  // 子组件
  app.component('async-component', Vue.defineAsyncComponent(() => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          template: '<div >this is an async component<div/>'
        })
      }, 3000)
    })
  }))
14. provide/inject
  // 父组件
  const app = Vue.createApp({
    data() {
      return {
        count: 1
      }
    },
    provide() {
      return {
      // 向下传递数据，注意 count 不会和 data 中的 count 同步变化！
      // 如果要同步，则需要传递监听后的对象类型
        count: this.count
      }
    }
    template: '<erzi />'
  })
  // 孙子组件
  app.component('sunzi', {
    inject: ['count'],
    template: '<div>{{ count }}</div>'
  })
15. 过渡和动画: 在标签上用<transition>内容</transition>包住
  // 入场过渡
  .v-enter-from {
    opacity: 0;
  }
  .v-enter-active {
    transition: opacity 1s; // 也可用animate动画
  }
  .v-enter-to {
    opacity: 1;
  }
  // 出场过渡
  .v-leave-from {
    opacity: 0;
  }
  .v-leave-active {
    transition: opacity 1s; // 也可用animate动画
  }
  .v-leave-to {
    opacity: 1;
  }
  // 动画
  @keyframes shake {
    0% {
      transform: translateX(-100px)
    }
    0% {
      transform: translateX(-50px)
    }
    100% {
      transform: translateX(50px)
    }
  }
  .v-enter-active {
    animation: shake 1s;
  }
  .v-leave-active {
    animation: shake 1s;
  }
  1. 如果给了 name 属性则 v- 就要对应 name 的 val 值，如 <transition name="hello"><组件/></transition>
      则 css 名称需要写成 .hello-enter-form 等
  2. 也可自定义类名，如： <transition enter-active-class="hello"><组件/></transition>
      则 css 名称需要写成 .hello 等
  3. 在<transition>标签内可写自定义属性和两种动画一起使用时 type="transition"，表示持续时间由transition决定
  4. 在<transition>标签内可写自定义属性和两种动画一起使用时 duration="1000"，表示持续时间为 1000ms
      也可以写一个对象，控制入场出场动画时间，如：:duration="{ enter: 1000, leave: 1000 }"
  5. 取消 css 动画，<transition :css="false">
      js动画: 在<transition>中定义事件,el、done为函数接收的参数
      @before-enter="函数名(el)"、@enter="函数名(el, done)"、@after-enter="函数名(el)"
      @before-leave="函数名(el)"、@leave="函数名(el, done)"、@after-leave="函数名(el)"
  6. 在 <transition-grop> 中的类名会多一个 v-move，其他都和 <transition> 一样
  7. 具体看基础知识
16. 自定义指令
  app.directive('pos', {
    beforeMount() {
      console.log('beforeMount')
    },
    mounted(el, binding) {
      console.log(binding.value) // 等于号后面的值，如：v-pos="100"，即 100
      console.log(binding.agr) // 冒号后面的值，如：v-pos:left="100"，即 left
      console.log('mounted')
    },
    beforeUpdate() {
      console.log('beforeUpdate')
    },
    updated(el, binding) {
      console.log(binding.value) // 等于号后面的值，如：v-pos="100"，即 100
      console.log(binding.agr) // 冒号后面的值，如：v-pos:left="100"，即 left
      console.log('updated')
    },
    beforeUnmount() {
      console.log('beforeUnmount')
    },
    unmount() {
      console.log('unmount')
    }
  })
  如果一个指令中只有 mounted 和 updated 这两个生命周期函数，且里面的代码是一样的，则可以写成下面这种样子
  app.directive('pos', (el, binding) => {
    console.log(el)
    console.log(binding)
  })
  <组件 v-pos:left="100" /> // 100 也可以用 data 中的变量代替
17. 传送门 teleport 标签可以把里面的标签挂载到对应的 DOM 上去，且可以继续使用该组件中的变量等方法
  const app = Vue.createApp({
    data() {
      return {
        msg: 'hello'
      }
    },
    template: `
      <div class="container">
        <div class="box1">{{ msg }}</div>
        <teleport to="body"> // 挂载到 body 上
          <div class="box1">{{ msg }}</div>
        </teleport>
        <teleport to="#id"> // 挂载到 id = id 的 DOM 节点上
          <div class="box1">{{ msg }}</div>
        </teleport>
      </div>
    `
  })
18. render 函数
  // 父组件
  const app = Vue.createApp({
    template: `
      <my-title :level="2">
        hello
      <my-title>
    `
  })
  // 子组件
  const app = Vue.createApp({
    props: ['level'],
    render() {
      const { h } = Vue
      return h('h' + this.level, {}, this.$slots.default())
    },
    // 上面的 render 函数和下面的 template 效果一样
    template: `
      <h1 v-if="level === 1"><solt /></h1>
      <h2 v-if="level === 2"><solt /></h2>
      <h3 v-if="level === 3"><solt /></h3>
      <h4 v-if="level === 4"><solt /></h4>
      <h5 v-if="level === 5"><solt /></h5>
      <h6 v-if="level === 6"><solt /></h6>
    `
  })
19. plugin 插件
  定义：
  const myPlugin = {
    install(app, options) {
      console.log(app) // vue 实例
      console.log(options) // 自定义参数，app.use(plugin, option)
      app.provide('name', 'chenj') // 全局注入
      app.directive('focus', { // 全局指令
        mounted(el) {
          el.focus()
        }
      })
      app.mixin({
        mounted() {
          console.log('全局 mixin')
        }
      })
      app.config.globalProperties.$sayHello = 'hello'
    }
  }
  使用：
  const app = Vue.createApp({
    mounted() {
      console.log('mounted')
    }
  })
  app.use(myPlugin, { name: '自定义参数' })
20. Suspense 异步组件
  1. 简化异步组件加载展示
  2. 可以使用 onErrorCaptured(() => {}) 这个生命周期监听异步组件的错误
  <Suspense>
    <template #default>
      <异步组件 />
    </template>
    <template #fallback>
      <loading组件 />
    </template>
  </Suspense>
21. 给组件设置 'class'，在 Vue2 中会直接加在组件的根标签上，如果组件内部的根标签上也有 'class' 的话
    如果 'class' 名称不同则样式会进行合并，如果 'class' 名称相同，则内部和外部不同的样式会进行合并
    相同的样式会覆盖（外部优先级高），在 Vue3 中也遵循 Vue2 的规则，但是如果在 Vue3 中的组件内写多个根标签的话
    则外部的 'class' 就不会生效
22. 给组件设置 style，在 Vue2 中会直接加在组件的根标签上，如果和根标签上的 style 里面的样式不重复，则会进行合并
    如果重复则会进行覆盖（外部优先级高），在 Vue3 中也遵循 Vue2 的规则，但是如果在 Vue3 中的组件内写多个根标签的话
    则外部的 style 就不会生效
----------------------------------------------------------------------------------------------
// Composition API
1. setup 函数，在函数中使用不了 this 调用其他实例上的属性或方法，因为 setup 函数在 created 初始化之前被创建
  const app = Vue.createApp({
    template: `
      <div @click="handleClick">{{ name }}</div>
    `,
    mounted() {
      this.$option.setup() // 可以执行
    },
    setup(props, context) {
      return {
        name: 'chenj',
        handleClick: () => {
          alert('点击了')
        }
      }
    }
  })
2. ref 处理基础类型数据
  const app = Vue.createApp({
    template: `
      <div>{{ name }}</div>
    `,
    setup(props, context) {
      const { ref } = Vue
      // ref 'chenj' 变成 proxy({ value: 'chenj' })
      // 因为 proxy 只能传入对象，所以当传入基础类型数据时，会默认加上 value 作为 key 值
      let name = ref('chenj')
      setTimeout(() => {
        name.value = 'chenj333' // 所以修改的时候要使用 name.value，而在模板中使用时，vdom 会默认取 value，所以不用写 name.value
      }, 3000)
      return { name }
    }
  })
3. reactive 处理引用类型数据
  const app = Vue.createApp({
    template: `
      <div>{{ nameObj.name }}</div>
    `,
    setup(props, context) {
      const { reactive } = Vue
      // reactive 会把 { name: 'chenj' } 变成 proxy({ name: 'chenj' })
      let nameObj = reactive({ name: 'chenj' })
      setTimeout(() => {
        nameObj.name = 'chenj333'
      }, 3000)
      return { nameObj }
    }
  })
4. readonly 处理不可变值
  const app = Vue.createApp({
    template: `
      <div>{{ nameObj.name }}</div>
    `,
    setup(props, context) {
      const { readonly } = Vue
      // readonly 会把 { name: 'chenj' } 变成 proxy({ name: 'chenj' })
      let nameObj = readonly({ name: 'chenj' })
      setTimeout(() => {
        nameObj.name = 'chenj333' // 报错，不可修改
      }, 3000)
      return { nameObj }
    }
  })
5. toRefs 将响应式对象（reactive 封装）转换为普通对象，对象的每个属性都是对应的 ref，两者保持引用关系
  const app = Vue.createApp({
    template: `
      <div>{{ name }}</div>
    `,
    setup(props, context) {
      const { reactive, toRefs } = Vue
      // reactive 会把 { name: 'chenj' } 变成 proxy({ name: 'chenj' })
      let nameObj = reactive({ name: 'chenj' })
      // toRefs 会把 proxy({ name: 'chenj' }) 变成 proxy({ name: proxy({ value: 'chenj' }) })
      const { name } = toRefs(nameObj)
      setTimeout(() => {
        name.value = 'chenj333'
      }, 3000)
      return { name }
    }
  })
6. toRef 针对一个响应式对象（reactive 封装）的属性创建一个 ref，具有响应式，两者保持引用关系
  const app = Vue.createApp({
    template: `
      <div>{{ age}}</div>
    `,
    setup(props, context) {
      const { reactive, toRef } = Vue
      // reactive 会把 { name: 'chenj' } 变成 proxy({ name: 'chenj' })
      let nameObj = reactive({ name: 'chenj' })
      // toRef 如果 nameObj 中没有 age 属性则会默认加上这个 age 属性赋值为空，如果使用 toRefs 会报错
      const age = toRef(nameObj, 'age') // 不需要解构
      setTimeout(() => {
        age.value = 'chenj333'
      }, 3000)
      return { age }
    }
  })
7. setup 的 context 参数
  const app = Vue.createApp({
    template: `
      <div>child</div>
    `,
    setup(props, context) {
      const { attrs, slots, emit } = context
      console.log(attrs) // 在 None-Props 下的父组件传递过来的参数
      console.log(slots) // vue2.x 中的 this.slots
      console.log(emit) // vue2.x 中的 this.emit
      return {}
    }
  })
8. computed 计算属性，返回的值是 ref 类型数据
  const app = Vue.createApp({
    template: `
      <div>
        <div @click="handleClick">{{ count }}</div>
        <div>{{ countAddAfter }}</div>
      </div>
    `,
    setup(props, context) {
      const { ref, computed } = Vue
      const count = ref(0)
      const handleClick = () => {
        count.value += 1
      }
      // 方式一
      const countAddFive = computed(() => {
        return count.value + 5
      })
      // 方式二
      const countAddFive = computed(() => {
        get: () => {
          return count.value + 5
        }
        set: params => {
          count.value + params
        }
      })
      return {
        count,
        handleClick,
        countAddAfter
      }
    }
  })
9. watch 侦听器
  const app = Vue.createApp({
    template: `
      <div>
        <input v-model="name" />
        name is {{ name }}
      </div>
    `,
    setup(props, context) {
      const { ref, reactive watch } = Vue
      const name = ref('chenj')
      const nameObj = reactive({ name: 'chenj' })
      // 方式一，基础类型
      const watchStop1 = watch(name, (newValue, oldValue) => {
        console.log(newValue)
        console.log(oldValue)
        watchStop1() // 停止监听
      }, { immediate: true }) // 立即执行
      // 方式二，引用类型
      const watchStop2 = watch(() => nameObj.name, (newValue, oldValue) => {
        console.log(newValue)
        console.log(oldValue)
        watchStop2() // 停止监听
      }, { immediate: true }) // 立即执行
      // 方式三，引用类型，且一次性监听同一个引用类型下的多个属性
      const watchStop3 = watch([() => nameObj.name, () => nameObj.name2], ([newName, oldName], [newName2, oldName2]) => {
        console.log(newName, oldName)
        console.log(newName2, oldName2)
        watchStop3() // 停止监听
      }, { immediate: true }) // 立即执行
      return {
        name
      }
    }
  })
10. watchEffect 侦听器
  const app = Vue.createApp({
    template: `
      <div>
        name is {{ nameObj.name }}
      </div>
    `,
    setup(props, context) {
      const { reactive watchEffect } = Vue
      const nameObj = reactive({ name: 'chenj' })
      // 马上执行，并且当 nameObj.name 发生变化时，函数就会重新执行
      // 不能获取之前数据的值
      const watchStop = watchEffect(() => {
        console.log(nameObj.name)
        watchStop() // 停止监听
      })
      return {
        nameObj
      }
    }
  })
11. 生命周期函数，没有 beforeCreate 和 create
  const app = Vue.createApp({
    template: `
      <div>hello</div>
    `,
    setup(props, context) {
      const {
        onBeforeMount onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onRenderTracked, onRenderTriggered
      } = Vue
      onBeforeMount(() => {
        console.log('onBeforeMount') // 对应 vue2.x 中的 beforeMount
      })
      onMounted(() => {
        console.log('onMounted') // 对应 vue2.x 中的 mounted
      })
      onBeforeUpdate(() => {
        console.log('onBeforeUpdate') // 对应 vue2.x 中的 beforeUpdate
      })
      onUpdated(() => {
        console.log('onUpdated') // 对应 vue2.x 中的 updated
      })
      onBeforeUnmount(() => {
        console.log('onBeforeUnmount') // 对应 vue2.x 中的 beforeDestroy
      })
      onUnmounted(() => {
        console.log('onUnmounted') // 对应 vue2.x 中的 destroyed
      })
      onRenderTracked(() => {
        console.log('onRenderTracked') // 每次渲染后重新收集响应式依赖会触发
      })
      onRenderTriggered(() => {
        console.log('onRenderTracked') // 每次页面重新渲染时会触发，第一次渲染不会触发
      })
      return {}
    }
  })
12. provide 和 inject
  // 父组件
  const app = Vue.createApp({
    template: `
      <div>
        <child />
      </div>
    `,
    setup() {
      const { provide, ref, readonly } = Vue
      const name = ref('chenj')
      provide('name', readonly(name)) // 通过 readonly 避免子组件进行修改
      provide('changeName', value => {
        name.vlaue = value
      })
      return {}
    }
  })
  // 子组件
  app.component('child', {
    template: `
      <div @click="handleClick">
        {{ name }}
      </div>
    `,
    setup() {
      const { inject } = Vue
      const name = inject('name')
      const changeName = inject('changeName')
      const handleClick = () => {
        changeName('chenj2') // 通过父组件去修改，而不是直接修改父组件的值
      }
      return { name, handleClick }
    }
  })
13. ref dom 引用
  const app = Vue.createApp({
    template: `
      <div>
        <div ref="helloDom">hello</div>
      </div>
    `,
    setup() {
      const { ref, onMounted } = Vue
      const helloDom = ref(null)
      onMounted(() => {
        console.log(helloDom.value)
      })
      return { helloDom }
    }
  })
14. vuex
  import { useStore } from 'vuex'
  const store = useStore()
  console.log(store.state)
  console.log(store.dispatch())
  console.log(store.commit())
  1. 使用 createStore 方法创建 Store 实例
  2. 在 setup 方法中使用 useStore 来引用 Store 对象
  3. creataLogger 单独抽离，其他用法保持 Vue2 一致
15. vue-router
  import { useRouter } from 'vue-router'
  const router = useRouter()
  console.log(router.push({ name: 'Login' }))
  console.log(router.query)
  1. 引用方式变化，routes 属性加入必填字段
  2. 不再给路径默认添加 '/'，redirect 重定向需要写全路径
  3. 动态路由匹配针对 '*'，需要使用 pathMatch 属性进行匹配 // 'pathMatch(.*)'
  4. 当使用命名路由进行跳转路径是不存在时会报错
  5. 让 router-link 标签渲染对应的自定义标签，在 Vue2 中使用 tag="span"，在 Vue3 中使用以下方法
    <router-link to="/path" custom v-slot="{ navigate }">
       <span @click="navigate" >Home</span>
     </router-link>
----------------------------------------------------------------------------------------------
// ref、toRef、toRefs 的最佳使用方式
1. 用 reactive 做对象的响应式，用 ref 做值类型的响应式
2. setup 中返回 toRefs(state)，或者 toRef(state, xxx)
3. ref 的变量命名都用 xxxRef
4. 合成函数返回响应式对象时，使用 toRefs
----------------------------------------------------------------------------------------------
// 错误监听
1. errorCaptured 生命周期用来监听一些重要、有风险组件的错误
2. window.onerror 和 errorHandler 候补全局监听
3. 注意：
  1. errorCaptured 函数返回 false，捕获的错误则不会上去传播
  2. 如果全局设置了 errorHandler，发生错误被 errorHandler 捕获到了，window.onerror 则不会触发
  3. 异步错误，如 settimeout 会被 window.onerror 捕获，其他两个捕获不到
4. promise 未处理的 catch 需要 onunhandledrejection
----------------------------------------------------------------------------------------------
// 面试真题
1. vue3 比 vue2 有什么优势？
  1. 性能更好
  2. 体积更小
  3. 更好的 ts 支持
  4. 更好的代码组织
  5. 更好的逻辑抽离
  6. 更多新功能
2. vue3 和 vue2 的生命周期有什么区别？
  1. beforeDestroy 改为 beforeUnmount
  2. destroyed 改为 unmount
  3. 其他沿用 vue2 的生命周期
3. Composition API 对比 Options API？
  1. Composition API 带来了什么？
    1. 更好的代码组织
    2. 更好的逻辑复用
    3. 更好的类型推导
  2. Composition API 和 Options API 如何选择？
    1. 不建议共用，会引起混乱
    2. 小型项目、业务逻辑简单，用 Options API
    3. 中大型项目、逻辑复杂，用 Composition API
  3. 别误解 Composition API
    1. Composition API 属于高阶技巧，不是基础必会
    2. Composition API 是为解决复杂业务逻辑而设计
    3. Composition API 就像 Hooks 在 React 中的地位
4. 为何需要 ref？
  1. 返回值类型，会丢失响应式
  2. 如在 setup、computed、合成函数，都有可能返回值类型
  3. vue 如不定义 ref，用户将自造 ref，反而混乱
5. 为何 ref 需要 value 属性？
  1. ref 是一个对象（不丢失响应式），value 存储值
  2. 通过 .value 属性的 get 和 set 实现响应式
  3. 用于模板、reactive 时，不需要 .value，其他情况都需要
6. 为何需要 toRef 和 toRefs？
  1. 初衷：不丢失响应式的情况下，把对象数据分解或扩散
  2. 前提：针对的是响应式对象（reactive 封装的）非普通对象
  3. 注意：不创造响应式，而是延续响应式
7. vue3 升级了哪些重要功能？
  1. createApp
    1. vue2.x
      1. const app = new Vue({})
      2. Vue.use()
      3. Vue.mixin()
      4. Vue.component()
      5. Vue.directive()
    2. vue3
      1. const app = Vue.createApp({})
      2. app.use()
      3. app.mixin()
      4. app.component()
      5. app.directive()
  2. emits 属性 // 在触发事件的时候应该声明 emits 配置项
  3. 生命周期
  4. 多事件 // 在一个事件中可以绑定多个事件，如：<button @click="one($event), two($event)">按钮</button>
  5. Fragment // 在 template 中不需要在最外层有一个父节点进行包裹
  6. 移除 .sync
  7. 异步组件的写法
    1. vue2.x 使用 () => import('组件路径')
    2. vue3 使用 defineAsyncComponent(() => { import('组件路径') }) // import { defineAsyncComponent } from 'vue'
  8. 移除 filter
  9. Teleport // 传送门
  10 Suspense // 加载时的 loading 封装
  11. Composition API
8. proxy 如何实现响应式？
  1. proxy 能规避 Object.defineProperty 的问题
  2. proxy 无法兼容所有浏览器，无法 polyfill
  3. 深度监听，性能更好， vue2.x 的响应式需要一次性递归，而 vue3 则是使用了（get 时）才需要递归
  4. 可监听新增或删除的属性
  5. 可监听数组变化
9. watch 和 watchEffect 的区别？
  1. 两者都可以监听 data 属性变化
  2. watch 需要明确监听哪个属性
  3. watchEffect 会根据其中的属性，自动监听其变化
10. setup 中如何获取组件实例？
  1. 在 setup 和其他 Composition API 中没有 this
  2. 可通过 getCurrentInstance 获取当前实例
  3. 若使用 Options API 可照常使用 this
11. vue3 为何比 vue2 快？
  1. Proxy 响应式
  2. PatchFlag（用于 diff 比较）
    1. 编译模板时，动态节点做标记 // 动态节点即 v-bind 或 插件表达式
    2. 标记分为不同的类型，如：TEXT、CLASS、PROPS
    3. diff 算法时，可以区分静态节点，以及不同类型的动态节点
        Vue2 中会对比静态节点，Vue3 标记后可以不用对比静态节点，因为它不会变，只需要对比动态节点
  3. hoistStatic
    1. 将静态节点的定义提升到父作用域并缓存起来
    2. 多个相邻的相同的静态节点会被合并起来一起定义，而不是每个都定义一遍（vue 自身的合并策略，10个）
    3. 典型的拿空间换时间的优化策略
  4. cacheHandler
    1. 缓存事件
  5. SSR 优化
    1. 静态节点直接初输出，绕过了 vdom
    2. 动态节点还是需要动态渲染
  6. tree-shaking
    1. 编译时会根据不同的情况引入不同的 API
12. vite 是什么？
  1. vite 是一个前端打包工具，vue 作者发起的项目
  2. 借助 vue 的影响力，发展较快，和 webpack 竞争
  3. 优势：开发环境下无需打包，启动快
13. vite 为什么启动非常快？
  1. 开发环境使用 ES6 Module，无需打包，非常快 // 1s
  2. 生成环境使用 rollup，并不会快很多
14. ES Module 在浏览器中的应用？
  1. <script type="module"></script>
  2. <script type="module" src="./url"></script>
  3. <script type="module">
      import { handle } from 'https://webchenjie.cn'
     </script>
15. Composition API 和 React Hooks 对比
  1. 前者 setup 只会被调用一次，而后者函数会被多次调用
  2. 前者无需 useMemo、useCallback，因为 setup 只调用一次
  3. 前者无需顾虑调用顺序，而后者需要保证 hooks 的顺序一致
  4. 前者 reactive + ref 比后者 useState 要更难能理解