Vue3比Vue2的优势是什么？

• 性能更好
• 体积更小
• 更好的TS支持，Vue3是ts开发的
• 更好的代码组织
• 更好的逻辑抽离
• 更多的新功能

Vue3的生命周期？

1. Options API的生命周期

• beforeDestroy -> beforeUnmount
• destroyed -> unmouted 仅仅是名字的修改，其他沿用Vue2的生命周期

2. Composition API生命周期

setup 等于beforeCreate和created

Composition Api 和Options API

Composition API带来了什么？

• 更好的代码组织
• 更好的逻辑复用
• 更好的类型推导

如何抉择？

• 不建议共用，会引起混乱
• 小型项目，业务逻辑简单，用Options API
• 中大型项目，业务逻辑复杂，用Composition API

如何理解ref toRef 和 toRefs？

ref

基本使用

setup() {
    // 推荐所有的ref类型变量名增加后缀Ref进行标记。防止后续使用时忘记了时ref类型。
    const ageRef = ref(20) // 值类型 响应式
    const nameRef = ref('carmineprince')
    const state = reactive({
        name: nameRef // ref类型可以直接在reactive中使用
    })
    return {
        ageRef,
        state
    }
}

使用ref获取元素

<template>
  <p ref="elementRef">test ref get element</p>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
  setup() {
    const elementRef = ref(null)
    // 在加载完成的生命周期才能去获取元素
    onMounted(()=>{
      console.log(elementRef.value.innerHTML)
    })
    return {
      elementRef
    }
  }
}
</script>

toRef

<template>
  <p>use toRef</p>
  <p>person.phoneNumber:{{ person1.phoneNumber }} ---- phoneNumberRef:{{ phoneNumberRef }}</p>
  <button @click="handlePhoneNumberChange">
    The value of person.phoneNumber changes, and so does the value of phoneNumberRef
  </button>
</template>
<script lang="ts" setup>
import {reactive, toRef} from 'vue'
const person1 = reactive({
  name: 'carmineprince',
  phoneNumber: '15555555555'
})
const phoneNumberRef = toRef(person1, 'phoneNumber')
const handlePhoneNumberChange = () => {
  person1.phoneNumber = person1.phoneNumber === '15555555555' ? '12222222222' : '15555555555'
}
</script>

toRefs

<template>
  <p>use toRefs</p>
  <p>student:{{ student }}</p>
  <p>studentAsRefs:{{ studentAsRefs }}</p>
  <button @click="onStudentChangeClick">change studentAsRefs.age.value</button>
  <button @click="onStudentRefsChangeClick">change student.age</button>
</template>
<script lang="ts" setup>
import {reactive, toRefs} from 'vue'
const student = reactive({
  name: 'carmineprince',
  age: 18
})
const studentAsRefs = toRefs(student)
const onStudentChangeClick = () => {
  student.age = student.age === 18 ? 19 : 18
}
const onStudentRefsChangeClick = () => {
  studentAsRefs.age.value = studentAsRefs.age.value === 18 ? 19 : 18
}
</script>

为何需要ref？

• 返回值类型，会丢失响应式
• 如在setup，computed，合成函数中，都有可能返回值类型
• Vue如不定义ref，用户将自造ref，反而混乱

为何需要.value?

• ref是一个对象（不丢失响应式），value储存值
• 通过.value属性的get和set实现响应式
• 用于模板、reactive时，不需要.value，其他情况都需要（没有vue编译的）

为何需要 toRef toRefs?

• 初衷：不丢失响应式的情况下，把对象分解/解构
• 前提：针对的时响应式对象（reactive封装的）非普通对象
• 注意：不创造响应式，而是延续响应式

Vue3升级了哪些重要的功能

• createApp
• emits属性
• 生命周期
• 多事件
• Fragment
• 移除.sync
• 异步组件的写法
• 移除filter
• Teleport
• Suspense
• Composition API

Composition Api如何实现代码逻辑复用

• 抽离逻辑代码到一个函数
• 函数命名约定为useXxxx格式（React Hooks也是）
• 在setup中引用useXxx函数

Vue3如何实现响应式？

Proxy实现响应式

watch和watchEffect的区别是什么

setup中如何获取组件实例？

Vue3为什么比Vue2快？

Vite是什么？

Composition API和React Hooks的对比