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
----------------------------------------------------------------------------------------------
// Reflect 作用
1. Reflect 和 Proxy 能力一一对应
2. 相比于 Object 较规范化、标准化、函数化
3. 替代掉 Object 上的工具函数
----------------------------------------------------------------------------------------------
// Proxy 的基本使用
const data1 = {
    name: 'chenj',
    age: 18
}
const data2 = [1, 2, 3]
const data = 1 ? data1 : data2 // 自行手动切换
const proxyData = new Proxy(data, {
    // receiver 就是当前的实例 proxyData
    // 如果 data 是数组，key 就是 index 下标
    get(target, key, receiver) {
        const ownKeys = Reflect.ownKeys(target)
        // 只处理本身（非原型）的属性
        // 因为如果是数组的话，调用 API 也会触发 get，如 data.push(4)，会先触发 get push，这个实际上我们不需要处理
        if (ownKeys.includes(key)) {
            console.log('get', key)
        }
        // 使用 Reflect 传的最后一个参数，改变了 this 指向，重要 ！！！
        const result = Reflect.get(target, key, receiver)
        console.log('result', result)
        return result // 返回结果
    }
    set(target, key, val, receiver) {
        // 重复的数据，不处理
        // 因为如果是数组的话，调用 data.push(4) 后，会先触发 set 4，再触发 set length 4，这个 length 实际上我们不需要处理
        if (val === target[key]) {
            return true
        }
        console.log('set', key, val)
        // 使用 Reflect 传的最后一个参数，改变了 this 指向，重要 ！！！
        const result = Reflect.set(target, key, val, receiver)
        console.log('result', result) // true or false
        return result // 是否设置成功
    }
    deleteProperty(target, key) {
        console.log('deleteProperty', key)
        const result = Reflect.deleteProperty(target, key)
        console.log('result', result) // true or false
        return result // 是否删除成功
    }
    // 不止可以监听 get、set、deleteProperty，还有其他的，具体看 MDN
})
proxyData.age = 20
proxyData.age1 = 21
delete proxyData.age1
----------------------------------------------------------------------------------------------
// Proxy 响应式实现

// 创建响应式
function reactive(target = {}) {
    if (typeof target !== 'object' || target == null) {
        // 不是对象或数组，则返回
        return target
    }

    // 代理配置
    const proxyConf = {
        // receiver 就是当前的实例 proxyData
        // 如果 data 是数组，key 就是 index 下标
        get(target, key, receiver) {
            const ownKeys = Reflect.ownKeys(target)
            // 只处理本身（非原型）的属性
            // 因为如果是数组的话，调用 API 也会触发 get，如 data.push(4)，会先触发 get push，这个实际上我们不需要处理
            if (ownKeys.includes(key)) {
                console.log('get', key)
            }
            // 使用 Reflect 传的最后一个参数，改变了 this 指向，重要 ！！！
            const result = Reflect.get(target, key, receiver)
            console.log('result', result)

            // 深度监听
            // 注意，这里是在 get 的时候才进行深度监听，和 Vue2 中的递归监听不一样，性能比之前的好，只有使用了才进行监听
            return reactive(result) // 返回结果
        }
        set(target, key, val, receiver) {
            // 重复的数据，不处理
            // 因为如果是数组的话，调用 data.push(4) 后，会先触发 set 4，再触发 set length 4，这个 length 实际上我们不需要处理
            if (val === target[key]) {
                return true
            }
            console.log('set', key, val)
            const ownKeys = Reflect.ownKeys(target)
            if (ownKeys.includes(key)) {
                console.log('更新操作', key)
            } else {
                console.log('新增操作', key)
            }
            // 使用 Reflect 传的最后一个参数，改变了 this 指向，重要 ！！！
            const result = Reflect.set(target, key, val, receiver)
            console.log('result', result) // true or false
            return result // 是否设置成功
        }
        deleteProperty(target, key) {
            console.log('deleteProperty', key)
            const result = Reflect.deleteProperty(target, key)
            console.log('result', result) // true or false
            return result // 是否删除成功
        }
        // 不止可以监听 get、set、deleteProperty，还有其他的，具体看 MDN
    }

    // 生成代理对象
    const observed = new Proxy(target, proxyConf)
    return observed
}

// 测试数据
const data1 = {
    name: 'chenj',
    age: 18
}
const data2 = [1, 2, 3]
const data = 1 ? data1 : data2 // 自行手动切换

const proxyData = reactive(data)
proxyData.age = 20
proxyData.age1 = 21
delete proxyData.age1
----------------------------------------------------------------------------------------------
// Vue3 中使用 JSX
1. 使用 .vue 后缀
    `<script>
        import { ref, h } forom 'vue'

        export default {
            props: {
                a: String
            },
            // 使用方式一：使用 setup 返回一个函数作为 render
            setup(props) {
                const countRef = ref(0)

                // 方式一
                return () => {
                    return <p>测试{countRef.value}</p>
                }

                // 方式二
                const render = () => {
                    return <p>测试{countRef.value}</p>
                }
                return render

                // 方式三
                return () => [
                    h('div', {})
                ]
            },
            // 使用方式二：直接使用 render
            render() {
                // 方式一
                return <p>测试{countRef.value}</p>

                // 方式二
                return h('h' + this.level, {}, this.$slots.default())
            },
        }
    </script>`
2. 使用 .jsx 后缀
    `import { ref, defineComponent } forom 'vue'

    // 使用方式一：直接就是 setup 函数
    export default defineComponent(() => {
        const countRef = ref(0)

        // 方式一
            return () => {
                return <>
                    <p>测试{countRef.value}</p>
                </>
            }

            // 方式二
            const render = () => {
                return <>
                    <p>测试{countRef.value}</p>
                </>
            }
            return render
    })

    // 使用方式二：传入对象配置（接收参数...）
    export default defineComponent({
        name: 'Demo1',
        props: ['a'],
        // 使用方式一：使用 setup 返回一个函数作为 render
        setup(props) {
            const countRef = ref(0)

            // 方式一
            return () => {
                return <>
                    <p>data{countRef.value}</p>
                    <p>props{props.a}</p>
                </>
            }

            // 方式二
            const render = () => {
                return <>
                    <p>data{countRef.value}</p>
                    <p>props{props.a}</p>
                </>
            }
            return render
        },

        // 使用方式二：直接使用 render
        render() {
            // 方式一
            return <p>测试{countRef.value}</p>

            // 方式二
            return h('h' + this.level, {}, this.$slots.default())
        },
    })
    `
3. JSX 和 template 语法的区别
    1. JSX 本质就是 js 代码，可以使用 js 的任何能力
    2. template 只能嵌入简单的 js 表达式，其他需要指令，如 v-if
    3. JSX 已经成为 ES 规范，template 还是 Vue 自家的规范
4. JSX 和 template 本质是相同的，都会被编译为 js 代码（render 函数）
5. 在 JSX 中使用作用域插槽，本质上就是和 react 中的 render props 原理是一样的
    就是父组件把 render 函数传给子组件，子组件执行函数，并把内部的数据当做参数传在 render 函数上
----------------------------------------------------------------------------------------------
// Vue3 script setup
1. Vue3 引入了 compontion API，里面需要写 setup 函数，并且需要把状态进行返回，模板上才能使用，
    这样太繁琐，所以在 Vue 版本 >= 3.2.0 出了 script setup，在之前的 3.0 版本都是需要进行返回状态
    `<template>
        <div @click="handleClick">{{ countRef }}</div>
    </template>
    <script setup>
        import { ref, defineProps, defineEmits, defineExpose } from 'vue'

        const props = defineProps({
            name: String
        })

        const emit = defubeEmits(['change'])

        // 父组件通过 ref 获取子组件的引用，只有通过 defineExpose 导出的内容，父组件才能使用
        defineExpose({
            name: 'chenj',
            handleClick
        })

        const countRef = ref(0)

        function handleClick() {
            emit('change')
        }
    </script>`
2. 这是给 .vue 文件使用的，使用 JSX 的话还是和之前一样
----------------------------------------------------------------------------------------------
// 面试真题
1. vue3 比 vue2 有什么优势？
  1. 性能更好
  2. 体积更小
  3. 更好的 ts 支持
  4. 更好的代码组织
  5. 更好的逻辑抽离
  6. 更多新功能
2. vue3 和 vue2 的生命周期有什么区别？
  1. beforeDestroy 改为 beforeUnmount
  2. destroyed 改为 unmount
  3. 其他沿用 vue2 的生命周期
  4. 如果 Options API 和 Composition API 的生命周期都有些，Composition API 会先执行，再执行 Options API 的生命周期
  5. setup 比 beforeCreate 先执行
3. Composition API 对比 Options API？
  1. Composition API 带来了什么？
    1. 更好的代码组织
    2. 更好的逻辑复用
        1. 抽离逻辑代码到一个函数
        2. 函数命名约定为 useXxx 格式（React Hooks 也是）
        3. 在 setup 中引用 useXxx 函数使用
    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，其他情况都需要
  4. 示例
    function computed1(getter) {
        const ref = {
            value: null
        }
        settimeout(() => {
            ref.value = getter()
        }, 1000)
        return ref
    }
    function computed2(getter) {
        const ref = null
        settimeout(() => {
            ref = getter()
        }, 1000)
        return ref
    }
    console.log(computed1(() => 100)) // 1s 后打印 100，所以需要 .value，需要是引用类型
    console.log(computed2(() => 100)) // 1s 后打印 null
6. 为何需要 toRef 和 toRefs？
  1. 初衷：不丢失响应式的情况下，把对象数据分解或扩散
  2. 前提：针对的是响应式对象（reactive 封装的）非普通对象
  3. 注意：不创造响应式，而是延续响应式
  4. 如果直接 ...state，这样会失去响应式
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，换成 v-model，都是语法糖，就是传参和监听事件
  7. 异步组件的写法
    1. vue2.x 使用 () => import('组件路径')
    2. vue3 使用 defineAsyncComponent(() => { import('组件路径') }) // import { defineAsyncComponent } from 'vue'
  8. 移除 filter 过滤器
  9. Teleport // 传送门
    <teleport to="body">
        <div>渲染在 body 节点下</div>
    </teleport>
  10 Suspense // 加载时的 loading 封装
    <Suspense>
        <tempeate>
            <Test /> // 这是异步组件
        </template>
        <tempeate v-slot:fallback> // fallback 就是一个具名插槽
            Loading...
        </template>
    </Suspense>
  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 会根据其中的属性，自动监听其变化
  4. watchEffect 一开始就会执行一次，因为需要收集依赖，而 watch 默认是一开始是不执行的，可以通过 immediate 进行配置
10. setup 中如何获取组件实例？
  1. 在 setup 和其他 Composition API 中没有 this
  2. 可通过 getCurrentInstance 获取当前实例
    可以通过这个实例访问 Options API 中定义的 data 之类的信息，注意要在 onMounted 中获取
    因为 setup 是 created 之前执行的，data 还没初始化
  3. 若使用 Options API 可照常使用 this
11. vue3 为何比 vue2 快？
  1. Proxy 响应式，具体看上面的示例
  2. 模板编译优化，可以在这个网址上看编译内容 // https://template-explorer.vuejs.org/
    1. PatchFlag（用于 diff 比较）
        1. 编译模板时，动态节点做标记 // 动态节点即 v-bind 或 插件表达式
        2. 标记分为不同的类型，如：TEXT、CLASS、PROPS
        3. diff 算法时，可以区分静态节点，以及不同类型的动态节点
            Vue2 中会对比静态节点，Vue3 标记后可以不用对比静态节点，因为它不会变，只需要对比动态节点
        4. 具体是在 _createVNode('span', {id:_ctx.name},'chenj',8/* PROPS */,['id']) 这个函数上做的处理
    2. hoistStatic
        1. 也在是编译模板时，做的优化
        2. 将静态节点的定义提升到父作用域并缓存起来
        3. 多个相邻的相同的静态节点会被合并起来一起定义，而不是每个都定义一遍（vue 自身的合并策略，10个）
        4. 典型的拿空间换时间的优化策略
    3. cacheHandler
        1. 也在是编译模板时，做的优化
        2. 缓存事件
    4. SSR 优化
        1. 静态节点直接初输出，绕过了 vdom
        2. 动态节点还是需要动态渲染
    5. 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">
        console.log('xxx')
     </script>
  2. <script type="module" src="./url"></script>
  3. <script type="module">
      import { handle } from 'https://webchenjie.cn'
     </script>
  4. <script type="module">
        (async function() {
            const add = await import ('./url/add.js')
            console.log('add', add)
        })()
     </script>
  5. 虽然浏览器支持不错，但是线上还是要使用打包比较稳妥
15. Composition API 和 React Hooks 对比
  1. 前者 setup 只会被调用一次，而后者函数会被多次调用（重要！！！）
  2. 前者无需 useMemo、useCallback，因为 setup 只调用一次
  3. 前者无需顾虑调用顺序，而后者需要保证 hooks 的顺序一致，因为 setup 只调用一次
  4. 前者 reactive + ref 比后者 useState 要更难能理解
16. v-show 和 v-if 的区别？
    1. v-show 通过 css display 控制显示和隐藏
    2. v-if 组件真正的渲染和销毁,而不是显示和隐藏
    3. 频繁的切换显示状态用 v-show,否则用 v-if
17. 为何在 v-for 中用 key？
    1. 必须用 key,且不能是 index 和随机数
    2. diff 算法中通过 tag 和 key 来判断,是否是 sameNode
    3. 减少渲染次数,提升渲染性能
18. vue 组件如何通讯,常见？
    1. 父子组件 props 和 this.$emit
    2. 自定义事件 event.$on、event.$off、event.$emit （总线 bus）
    3. $attrs
    4. provide/inject
    5. $ref
    6. $parent
    7. vuex
19. 双向数据绑定 v-model 的实现原理？
    1. input 元素的 value = this.name
    2. 绑定 input 事件 this.name = $event.target.value
    3. data 更新触发 re-render
20. 对 MVVM 的理解？
    1. M: Model 层,即数据库
    2. V: View 层,即视图层 DOM
    3. VM: 即 Vue
21. computed 有何特点？
    1. 有缓存,data 不变不会重新计算
    2. 提高性能
22. 为何组件 data 必须是一个函数？
    1. vue 文件最后编译出来是一个 'class'
    2. 只有 data 是一个函数才能做到在不同的地方使用时 data 数据不共享
    3. 例子

        ```js
        class VueComponent {
            constructor(option) {
                this.option = option
            }
        }
        const option = {
            data1: {
                name: 'chenj',
                age: 18
            },
            data2() {
                return {
                    name: 'chenj',
                    age: 18
                }
            }
        }

        const component1 = new VueComponent(option)
        const component2 = new VueComponent(option)

        console.log(component1.option.data1 === component2.option.data1) // true
        console.log(component1.option.data2 === component2.option.data2) // false
        ```
23. ajax 请求应该放在哪个生命周期？
    1. mounted
    2. js 是单线程,ajax 异步获取数据
    3. 放在 mounted 之前是没有用的,只会让逻辑更加混乱
24. 如何将组件所有 props 传递给子组件？
    1. <组件名 v-bind="$props" />

25. 多个组件有相同的逻辑,如何抽离？
    1.  mixin
26. 何时要使用异步组件？
    1.  加载大组件
    2.  路由异步加载
    3.  优化性能
27. 何时需要使用 keep-alive？
    1.  缓存组件,不需要重复渲染
    2.  如多个静态 tab 页的切换
    3.  优化性能
28. 何时需要使用 beforeDestory？
    1.  解绑自定义事件 evnet.$off
    2.  清除定时器
    3.  解绑自定义的 DOM 事件,如 window.scroll 等
    4.  vue 事件会自动解除,自定义则需要自己解除
29. vuex 中 action 和 mutation 有区别？
    1.  action 中处理异步,mutation 不可以
    2.  mutation 做原子操作
    3.  action 可以整合多个 mutation
30. vue-router 常用的路由模式？
    1. hash 默认
        1. 实现原理：window.location.hash
    2. H5 history 需要服务端支持
        1. 实现原理：window.history.pushState 推送路由 + window.onpopstate 监听前进后退事件
    3. abstract history，Vue3 改名为 memory history，即 url 不会发生变化，没有前进后退
31. 如何配置 vue-router 异步加载？
    1. 使用函数返回 'import'
    2. component: () => import('路径')
32. 请用 vnode 描述一个 DOM 结构？
    1. 看 Vue 进阶知识的 vdom
33. 监听 data 变化的核心 API 是什么？
    1. Object.defineProperty
    2. 以及深度监听、监听数组
    3. 具体看 Vue 进阶知识的响应式
34. vue 如何监听数组变化？
    1.  重新定义原型,重写 push、pop 等方法,实现监听
    2.  具体看 Vue 进阶知识的响应式
35. 请描述响应式原理？
    1. 监听 data 变化
    2. 组件渲染和更新的流程
36. diff 算法的时间复杂度？
    1.  O(n)
    2.  在 O(n^3)基础上做了一下调整
37. 简述 diff 算法过程？
    1.  patch(ele, vnode)和 patch(oldVnode, newVnode)
    2.  patchVnode 和 addVnodes 和 removeVnodes
    3.  updatechildren // key 的重要性
38. Vue2、Vue3、React 三者 diff 算法的区别？
    1.  Vue2 - 双端比较
    2.  Vue3 - 在 Vue2 的基础上，增加最长递增子序列
    3.  React - 仅右移
39. vue 为何是异步渲染, $nextTick 何用？
    1.  异步渲染(以及合并 data 修改),以提高渲染性能
    2.  $nextTick 在 DOM 更新完之后,触发回调
40. vue 常见性能优化方式？
    1.  合理使用 v-show 和 v-if
    2.  合理使用 computed
    3.  v-for 时加 key,以及避免和 v-if 同时使用
    4.  自定义事件、DOM 事件及时销毁
    5.  合理使用异步组件
    6.  合理使用 keep-alive
    7.  data 层级不要太深
    8.  使用 vue-loader 在开发环境做模板编译 （预编译）
    9.  webpack 层面的优化
    10. 前端通用的性能优化,如图片懒加载 （具体看 js 的性能和安全）
    11. 使用 SSR
41. data 状态设计和组件设计？
    1. data 状态设计:
        1. 用数据描述所有内容
        2. 数据要结构化,易于程序操作(遍历、查找)
        3. 数据要可扩展,以便增加新的功能
    2. 组件设计:
        1. 从功能上拆分层次
        2. 尽量让组件原子化
        3. 容器组件(只管理数据)
        4. UI 组件(只显示视图)