1.组合式api（compositionapi）setup函数
**vue3相较于vue2最大的不同点就在于组合式api和选项式api的不同**
在vue3中我们常常会使用setup语法糖进行代码的书写,摒弃了原来的data、methods,mounted等,setup语法糖
告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。
通过下面两张图我们能清楚的了解到组合式api对于代码书写的好处,它能够让代码更集中的进行管理,如果结合hooks组件
我们能够让代码变得更加易读和优雅
配置项 Option API 数据,方法,计算属性等等 写在规定的配置项里面
Composition API
我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起
-
2.新的响应式原理ref 和 reactive
ref 数据响应
作用：基本数据类型的数据响应定义 或者dom连接
-
基本数据类型绑定
- 创建 RefImpl 响应式 Proxy 对象 ref 内部: 通过给 value 属性添加 getter/setter 来实现对数据的劫持
- 定义数据之后，模板里面直接使用值
- 修改数据 用.value 属性修改
-
响应式状态需要明确使用响应式 APIs 来创建。和从
setup()函数中返回值一样，ref 值在模板中使用的时候会自动解包
reactive 数据响应
作用： 引用类型的数据响应定义
- 作用: 定义多个数据的响应式
- const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
- 响应式转换是“深层的”：会影响对象内部所有嵌套的属性
- 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的
3.toRef
可以用来为源响应式对象上的某个 property 新创建一个 ref 。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。
const state = reactive({
foo: 1,
bar: 2
})
const fooRef = toRef(state, 'foo')
fooRef.value++
console.log(state.foo) // 2
state.foo++
console.log(fooRef.value) // 3
4.toRefs
作用：将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref 。
当从组合式函数返回响应式对象时， toRefs 非常有用，这样消费组件就可以在不丢失响应性的情况下对返回的对象进行解构/展开：
示例:
<script setup>
#引入reactive toRefs 函数
import { reactive, toRefs } from 'vue'
#创建响应式数据
const state = reactive({
属性1:值1,
属性2:值2
})
#数据解构出来,创建属性的ref,都通过value来获取值
const { 属性1, 属性2 } = toRefs(state)
</script>
5.diff算法优化
Vue2中的虚拟Dom是全量比较。Vue3新增静态标记（PatchFlag）。在与数据变化后，与上次虚拟DOM节点比较时，只比较带有PatchFlag标记的节点。并且可以从flag信息中得知具体需要比较的内容。
6.新的计算属性computed新的侦听器watch
vue3的computed 与vue2没有太大区别
- computed函数:
- 只有getter
- 有getter和setter
- 语法
const 计算属性变量 = computed(() => {
return 处理好的数据
});
#有getter 有 setter形式
const 计算属性变量 = computed({
get() {
return xx
},
set(value) {
},
});
- watch函数
与watch配置功能一致
监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
通过配置deep为true, 来指定深度监视
- watchEffect函数
不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
默认初始时就会执行第一次, 从而可以收集需要监视的数据
监视数据发生变化时回调
简单用法
watch(ref 或者reactive 数据,(newV,oldV)=>{
//观察数据变化执行 里面代码
},{
immediate:true, //立即执行
deep:true //深度监听
})
#观察多个数据变化
watch([()=>state.属性1,()=>state.属性2],()=>{
})
watchEffect 会立即执行里面代码 监视所有回调中使用的数据
watchEffect(()=>{
})
7.Hooks语法
- 使用Vue3的组合API封装的可复用的功能函数
- 用来取代vue2 mixin 目的也是抽离公共js逻辑
- 命名 userXxx开头的函数 一般会把一个功能封装在一个js中
8.生命周期变化
因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。
下表包含如何在 setup () 内部调用生命周期钩子：
| 选项式 API | Hook inside setup |
|---|---|
beforeCreate | Not needed* 不需要 |
created | Not needed* 不需要 |
beforeMount | onBeforeMount 挂载之前 |
mounted | onMounted 页面加载完成时执行 ### |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeUnmount | onBeforeUnmount |
unmounted | onUnmounted 页面销毁时执行 ### |
errorCaptured | onErrorCaptured |
renderTracked | onRenderTracked |
renderTriggered | onRenderTriggered |
activated | onActivated 【keep-alive】 |
deactivated | onDeactivated【keep-alive】 |
9.vue2 v-for优先级高于v-if vue3v-if优先级高于v-for
10.V-model的本质变化
prop：value->modelValue；
event：input->update:modelValue；
11.sync修改符已移除,由v-model代替
12他组件和api变化
Fragment(片断)
- 在Vue2中: 组件必须有一个根标签
- 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
- 好处: 减少标签层级, 减小内存占用
Teleport(传送门)-弹框
-
Teleport 提供了一种干净的方法, 让组件的html在父组件界面外的特定标签
-
例如：可以把一个组件里面的弹窗popUp 直接插进body标签里面
