优势：性能更好，体积更小，更好的ts支持，更好的代码组织和逻辑抽离，更多新功能
生命周期(支持两种)
Options API
vue2基础上：beforeDestory改为beforeUnmount，destroyed改为unmouted
beforeCreate() {
console.log("beforeCreate");
},
created() {
console.log("created");
},
beforeMount() {
console.log("beforeMount");
},
mounted() {
console.log("mounted");
},
beforeUpdate() {
console.log("beforeUpdate");
},
updated() {
console.log("updated");
},
// beforeDestroy改名
beforeUnmount() {
console.log("beforeUnmount");
},
// destroyed改名
unmounted() {
console.log("unmounted");
},
Composition API
// setup()相当于创建
// onBeforeMount onMounted相当于挂载
// onbeforeUpdate onUpdated相当于更新
// onBeforeUnmount onUnmounted相当于销毁/卸载
import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
} from "vue";
setup() {
console.log("setup");
onBeforeMount(() => {
console.log("onBeforeMount");
});
onMounted(() => {
console.log("onMounted");
});
onBeforeUpdate(() => {
console.log("onBeforeUpdate");
});
onUpdated(() => {
console.log("onUpdated");
});
onBeforeUnmount(() => {
console.log("onBeforeUnmount");
});
onUnmounted(() => {
console.log("onUnmounted");
});
},
Composition API 和Options API
Options API ：data methods watch mounted 类似对象形式
Composition API：
- 更好的代码组织：Options API业务逻辑分散，Composition API通过setup函数规整统一返回
- 逻辑复用(多个组件之间功能复用)
- 更好的类型推导，举例如下：
vue2使用方法如下，常规应该是this.methods不利于类型推导。但是vue3中Options API支持这样写。
vue3，Composition API：setup里面直接引用函数，接收函数返回值，然后统一返回。
Composition API如何实现代码逻辑复用？
Options API
Composition API和React Hooks对比？
reactive ref toRef toRefs .value语法？
ref
- 生成值类型响应式数据，js代码中通过.value获取并改变值
- ref创建的变量可用于模板和reactive。js代码中用.value获取值，但是.value不能写在reactive和模板中
- 获取模板中的dom元素，template通过ref绑定变量
toRef
针对一个响应式对象(reactive封装)的一个prop创建一个具有响应式的ref，两者保持引用关系，指向同一个地址
普通对象通过reactive变为响应式对象，reactive对象内部某个属性prop想实现响应式就通过toRef
toRefs
将整个响应式对象(reactive封装)转为普通对象，批量转化，对象的每一个prop都是对应的ref。两者保持引用关系，指向同一个地址。
- 转换前后对比
- 普通对象reactive变为响应式对象，reactive对象内部全部属性要实现响应式就通过toRefs
- 合成函数返回响应式对象
直接返回state不通过toRefs, 对象中的属性就会丢失响应式，若封装的函数内部有个响应式数据需要返回必须要toRefs(obj)，这样在其他地方解构出来才能保持响应式。解构出来后续在模板中使用时候就不用state.xxx。（比如：Composition API抽离代码逻辑）
ref toRef toRefs reactive使用时机？
- 创建响应式数据：对象用reactive，值类型用ref
- setup中返回toRefs(state)，或者toRef(state,'xxxx')：初始用reactive定义响应式对象，返回的时候用toRefs或toRef包装一下，这样模板中可以不用“.”的方式获取值，直接写属性名。
- ref 数据命名采用xxxRef
- 合成函数中最后使用toRefs返回响应式对象，有助于使用方进行解构
为何需要ref?
值类型会丢失响应式，这个值类型不仅仅是在初始化定义值类型，还有setup computed 合成函数都可能返回值类型。比如reactive创建的响应式对象取内部的值实际上也是一个值类型。
为何需要.value？
首先ref不会丢失响应式，说明ref是个对象。value存储值。{}，通过.value属性的get set实现响应式。
reactive和模板中经过vue编译不需要通过.value获取值，但是自己写的代码中需要。共享同一个地址。
为何需要toRef toRefs?
toRef 为源响应式对象上的属性新建一个ref，保持对其源对象属性的响应式连接。参数：源响应式对象和属性名，返回ref数据。例如使用父组件传递的props数据时，要引用props的某个属性且要保持响应式连接时用。
toRefs 将响应式对象转换为普通对象，其中每个属性都会指向原始对象相应属性的ref（保持响应式）。用于es6解构赋值，因为对响应式对象直接解构后不再有响应式，用toRefs可以保持。
vue3新功能
异步组件写法
移除filter
Teleport
suspense
compostion api
vue3响应式
object.defineProperty：深度监听要一次性递归，不能监听新增删除属性，不能监听原生数组
new proxy(data,{get set deleteProperty(target key)})，关键在于Reflect
v-model参数用法
- vue2
.sync：父子组件弹框控制显隐，对prop双向绑定，this.$emit('xx',value)。v-bind结合v-on
- vue3
watch和watchEffect区别
都可监听data属性变化
watch要明确监听哪个属性，ref类型不用.value，默认初始化不执行，需要配置参数
watchEffect自动检测执行函数中包含哪些属性，自动监听, 初始化一定会执行一次
setup中如何获取组件实例
setup和composition API没有this, 通过getCurrentInstance()获取
options api可以用this
data中的值在onmounted才能获取
vue3为什么快？
响应式proxy
patchflag：编译模板，动态节点做标记，diff算法区分静态节点以及不同类型的，
hoistStatic：静态节点的定义提升至父作用域缓存，合并多个相邻的静态节点，空间换时间
cacheHandler：缓存事件
ssr优化：静态节点直接输出，绕过vdom, 动态节点还是动态渲染
tree-shaking：编译时候根据不同情况引入不同API
vite为什么快？
原因是开发环境用ES6module，无需打包直接引用。生产环境用rollup。webpack是打包成es5。
