1、Vue3 比 Vue2 相比有什么优势？

2、Vue3 的生命周期？

Options API的生命周期？

Compositions API 的生命周期？

3、Compositions API 对比 Options API ?

Compositions API 带来了什么？

如何选择？

别误解Compositions API

4、如何理解 ref、toRef 和toRefs?

ref

生成值类型的响应式数据

获取 DOM 元素

toRef

<template>
  <div>
    <p>{{ stuRef }} ==== {{ nameRef }}</p>
  </div>
</template>

<script>
import {reactive, toRef} from "vue";

export default {
  name: "toRef",
  setup() {
    // toRef 如果用于普通对象（不具备响应式），结果不具备响应式
    // const student = {
    //   name: "Mike",
    //   age: 20
    // }
    const stuRef = reactive({
      name: 'Lisa',
      age: 10
    })

    const nameRef = toRef(stuRef, "name")

    setTimeout(() => {
      stuRef.name = 'Mike'
    }, 2000)

    return {
      stuRef,
      nameRef
    }
  }
}
</script>

<style scoped>

</style>

toRefs

<template>
  <div>
    <p>{{ name }} == {{ age }}</p>
  </div>
</template>

<script>
import {reactive, toRefs} from "vue";

export default {
  name: "toRefs",
  setup() {
    const stuRef = reactive({
      name: 'Lisa',
      age: 20
    })
    // 把 stuRef响应式对象转为student普通对象,student中的每一项都是对应的 ref
    const student = toRefs(stuRef)

    // 修改响应式对象中的每一项,student中每一项的跟着改变
    setTimeout(() => {
      stuRef.age = 30
      stuRef.name = 'Mike'
    }, 2000)
    
    return {
      ...student,  // 解构studnet，在DOM中可以直接写属性名,并且是响应式的
      ...stuRef // 结构stuRef，属性不是响应式
    }
  }
}
</script>

<style scoped>

</style>

最佳使用方式

进阶，深入理解

为何需要 ref ?

为何需要 .value ?

为何需要 toRef、toRefs ?

5、Vue3 升级了哪些重要的功能？

createApp

emit 属性

<template>
  <div class="home">
    <HelloWorld :msg="msg" @onSayHello="sayHello"/>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  data() {
      return {
        msg: 'Hello World'
      }
    },
  methods: {
    sayHello(info) {
      console.log('say hello', info)
    }
  }
}
</script>

```  子组件
<template>
    <div class="hello">
      {{ msg }}
    </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  emits: ['onSayHello'],
  setup(props, {emit}) {
    emit('onSayHello', 'vue3')
  }
}
</script>
```

多事件处理

Fragment

移除 .sync

异步组件

移除 filter

teleport

Suspense

Compositions API

6、Compositions API 如何实现逻辑复用 ？

7、VUe3 如何实现响应式？

Proxy 实现响应式

// const data = {
//     name: 'zhangsan',
//     age: 20,
// }
const data = ['a', 'b', 'c']

const proxyData = new Proxy(data, {
    get(target, key, receiver) {
        // 只处理本身（非原型的）属性
        const ownKeys = Reflect.ownKeys(target)
        if (ownKeys.includes(key)) {
            console.log('get', key) // 监听
        }

        const result = Reflect.get(target, key, receiver)
        return result // 返回结果
    },
    set(target, key, val, receiver) {
        // 重复的数据，不处理
        if (val === target[key]) {
            return true
        }

        const result = Reflect.set(target, key, val, receiver)
        console.log('set', key, val)
        // console.log('result', result) // true
        return result // 是否设置成功
    },
    deleteProperty(target, key) {
        const result = Reflect.deleteProperty(target, key)
        console.log('delete property', key)
        // console.log('result', result) // true
        return result // 是否删除成功
    }
})

Reflect的作用

Proxy 实现响应式总结

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

    // 代理配置
    const proxyConf = {
        get(target, key, receiver) {
            // 只处理本身（非原型的）属性
            const ownKeys = Reflect.ownKeys(target)
            if (ownKeys.includes(key)) {
                console.log('get', key) // 监听
            }

            const result = Reflect.get(target, key, receiver)

            // 深度监听
            // 性能如何提升的？通过get递归，获取那一层，就递归到那一层
            return reactive(result)
        },
        set(target, key, val, receiver) {
            // 重复的数据，不处理
            if (val === target[key]) {
                return true
            }

            // 判断是否是新增的属性
            const ownKeys = Reflect.ownKeys(target)
            if (ownKeys.includes(key)) {
                console.log('已有的 key', key)
            } else {
                console.log('新增的 key', key)
            }

            const result = Reflect.set(target, key, val, receiver)
            console.log('set', key, val)
            // console.log('result', result) // true
            return result // 是否设置成功
        },
        deleteProperty(target, key) {
            const result = Reflect.deleteProperty(target, key)
            console.log('delete property', key)
            // console.log('result', result) // true
            return result // 是否删除成功
        }
    }

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

// 测试数据
const data = {
    name: 'zhangsan',
    age: 20,
    info: {
        city: 'beijing',
        a: {
            b: {
                c: {
                    d: {
                        e: 100
                    }
                }
            }
        }
    }
}

const proxyData = reactive(data)

8、v-model 参数的用法

9、watch 和 watchEffect 的区别？

watch 监听数值 和 对象

watchEffect 监听

10、setup中如何获取组件实例 ？

11、Vue3 为何比 Vue2 快 ？

PatchFlag

hoistStatic

cacheHandler

缓存事件

SSR 优化

tree shaking

12、vite 是什么？

vite 为何启动快？

ES Module 在浏览器中的应用 ？

13、Compositions API 和React Hooks的对比 ？