目录

• 1、组合式API和setup语法糖
• • defineProps
  • defineEmits
  • defineExpose
  • 其他
• 2、响应式原理ref和reactive
• • ref
  • reactive
  • toRef
  • toRefs
• 3、computed和watch
• • computed
  • watch
  • watchEffect
• 4、v-model
• • v-model参数
  • v-model修饰符
• 5、key
• 6、v-if和v-for的优先级对比
• 7、异步组件

vue 作者（尤大）在2022-2-7起宣布 vue3 正式作为默认版本，vue3目前也是可以投入生产项目中了，vue3 + vite + TS也是当前比较流行的配置。本篇博客主要记录一下相比较于vue2，vue3的新变化。

1、组合式API和setup语法糖

Vue3.0给我们提供了composition API，而实现composition API这种代码风格主要是使用官方提供的setup这个函数。

可以看到，可以在setup函数中书写逻辑，不需要像vue2那样在data和methods定义对应的数据和方法，当然，对于computed、watch等需要通过hooks来创建，这也是选项式（vue2）和组合式（vue3）的区别所在，对于vue3来说，同一部分的业务逻辑代码（需要的数据，时间、监听等）可以写在一起，这样对于代码复盘、业务逻辑提取都是十分友好的。


vue3.2更是进一步优化了组合式api：

可以看到，相比较于vue3.0，vue3.2的script标签直接使用setup属性（也就是setup语法糖），代码中的变量和方法不需要return便可以直接在模板中直接使用，并且引入的组件也不需要在components中声明，直接也可以使用。
需要考虑的问题：如何获取props和emits……

defineProps

用于获取父组件传递的props。

defineEmits

用于调试父组件调用子组件时定义的方法。

defineExpose

父组件可以通过在组件中设置ref属性，然后在script中声明对应变量，来直接获取子组件实例（并不推荐）。
子组件：ChildComponent.vue

父组件：

其他

script setup会默认声明async，类似于async setup()的效果，你可以在script setup中直接使用await函数。
之前可以通过useContext从上下文中获取 slots 和 attrs。不过提案在正式通过后，废除了这个语法，被拆分成了useAttrs和useSlots。

2、响应式原理ref和reactive

vue2双向数据绑定是利用ES5的Object.defineProperty()对数据进行劫持,结合发布订阅模式来实现。
vue3中使用ES6的ProxyAPI对数据代理。
Proxy是直接代理一整个对象，所以相比较于Object.defineProperty劫持单个属性，Proxy有着先天的优势，比如可以直接代理对象的深层属性，对象添加或者移除属性时，也能直接监听到（Object.defineProperty不可以），直接代理数组等。
如果要在vue3.2中定义响应式数据（数据改变，页面更新），需要借助ref和reactive来处理数据。

ref

1. 作用：定义一个响应式的数据，或者说是生成一个引用实现对象
2. 语法：const xxx = ref(initValue)
   ● 创建一个包含响应式数据的引用对象（reference对象）
   ● JS中操作数据需要：xxx.value
   ● 模板中读取数据：直接使用即可

PS:

1. ref接收的数据可以是基本类型数据，也可以是对象类型。
2. 基本类型的数据：响应式是靠Object.defineProperty()的get和set完成的。
3. 对象类型的数据：内部使用了reactive函数。

reactive

1. 作用：定义一个对象类型的响应式数据。
2. 语法：const 代理对象 = reactive(源对象) 参数是一个对象或者数组，返回一个代理对象（Proxy的实例对象，简称proxy对象）。
3. reactive定义的响应式数据是深层次的。
4. 内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据。

1. 若要避免深层响应式转换，只想保留对这个对象顶层次访问的响应性，请使用 shallowReactive() 作替代。
2. 不能通过 …state （扩展运算符）方式结构，这样会丢失响应式。
3. 注意reactive封装的响应式对象，不要通过解构的方式返回，这是不具有响应式的。可以通过 toRefs 处理，然后再解构返回，这样才具有响应式。

const state = reactive({foo: 1,bar: 2
})// state.foo 本来是一个响应式对象，被重新赋值后就不是响应式对象了，只是一个普通基本类型值const {foo, bar} = state; // 此时 foo 就等于 1 了，1 是一个值，不是一个响应式对象
foo = 6; // 更改在视图中并不会生效，因为解构时 foo 被重新赋值了，即 const foo = state.foo; const foo = 1;

toRef

基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。

const state = reactive({foo: 1,bar: 2
})const fooRef = toRef(state, 'foo')// 更改该 ref 会更新源属性
fooRef.value++
console.log(state.foo) // 2// 更改源属性也会更新该 ref
state.foo++
console.log(fooRef.value) // 3

toRefs

将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。
当从组合式函数中返回响应式对象时，toRefs 相当有用。使用它，消费者组件可以解构/展开返回的对象而不会失去响应性:

function useFeatureX() {const state = reactive({foo: 1,bar: 2})// ...基于状态的操作逻辑// 在返回时都转为 refreturn toRefs(state)
}// 可以解构而不会失去响应性，因为解构后的 foo 是个 Ref 对象，如果直接解构state的话解构完是一个值 ‘1’
const { foo, bar } = useFeatureX()

3、computed和watch

我们知道，在vue2的选项式API中，可以在computed:{}和watch:{}中定义对应的计算属性和监听器。

computed: {fullName: function () {return this.firstName + ' ' + this.lastName}}

watch: {firstName: function (val) {this.fullName = val + ' ' + this.lastName},lastName: function (val) {this.fullName = this.firstName + ' ' + val}
}

那么在vue3的组合式API中，如何使用计算属性和监听器呢？

computed

我们可以直接使用computed方法来定义一个计算属性：

watch

同理，可以使用watch函数定义一个监听器：

直接给 watch() 传入一个响应式对象，会隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发。
对于一个返回响应式对象的 getter 函数，只有在返回不同的对象时，才会触发回调，可以通过添加第三个配置参数，来实现监听深层次属性变化：

watch(() => state.someObject,(newValue, oldValue) => {// 注意：`newValue` 此处和 `oldValue` 是相等的// *除非* state.someObject 被整个替换了},{ deep: true }
)

watchEffect

watch() 是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。

const url = ref('https://...')
const data = ref(null)async function fetchData() {const response = await fetch(url.value)data.value = await response.json()
}// 立即获取
fetchData()
// ...再侦听 url 变化
watch(url, fetchData)

我们可以用 watchEffect函数 来简化上面的代码。watchEffect() 会立即执行一遍回调函数，如果这时函数产生了副作用，Vue 会自动追踪副作用的依赖关系，自动分析出响应源。上面的例子可以重写为：

watchEffect(async () => {const response = await fetch(url.value)data.value = await response.json()
})

所以相比较于watch，watchEffect只有一个参数，就是一个回调函数。

4、v-model

v-model适用于双向绑定的指令，在vue2中，一个组件或者标签只能有一个v-model，并且默认属性和事件为value和input，所以我们也可以用于父子组件之间数据双向绑定。
vue3变化概述：
● 非兼容：用于自定义组件时，v-model prop 和事件默认名称已更改：
○ prop：value -> modelValue；
○ 事件：input -> update:modelValue；
● 非兼容：v-bind 的 .sync 修饰符和组件的 model 选项已移除，可在 v-model 上加一个参数代替；
● 新增：现在可以在同一个组件上使用多个 v-model 绑定；
● 新增：现在可以自定义 v-model 修饰符。
在 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：

v-model参数

若需要更改 model 的名称，现在我们可以为 v-model 传递一个参数，以作为组件内 model 选项的替代(默认为modelValue)：

这也可以作为 .sync 修饰符的替代，而且允许我们在自定义组件上使用多个 v-model。

v-model修饰符

除了像 .trim 这样的 2.x 硬编码的 v-model 修饰符外，现在 3.x 还支持自定义修饰符：

注意这里组件的 modelModifiers prop 包含了 capitalize 且其值为 true，因为它在模板中的 v-model 绑定上被使用了。
有了 modelModifiers 这个 prop，我们就可以在原生事件侦听函数中检查它的值，然后决定触发的自定义事件中要向父组件传递什么值。

5、key

● 新增：对于 v-if/v-else/v-else-if 的各分支项 key 将不再是必须的，因为现在 Vue 会自动生成唯一的 key。
○ 非兼容：如果你手动提供 key，那么每个分支必须使用唯一的 key。你将不再能通过故意使用相同的 key 来强制重用分支。
● 非兼容： 的 key 应该设置在 标签上 (而不是设置在它的子节点上)。
● 在 Vue 3.x 中，key 则应该被设置在 标签上。

6、v-if和v-for的优先级对比

两者作用于同一个元素上时，v-if 会拥有比 v-for 更高的优先级。（与vue2正好相反）

7、异步组件

在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。

import { defineAsyncComponent } from 'vue'const AsyncComp = defineAsyncComponent(() => {return new Promise((resolve, reject) => {// ...从服务器获取组件resolve(/* 获取到的组件 */)})
})
// ... 像使用其他一般组件一样使用 `AsyncComp`

ES 模块动态导入也会返回一个 Promise，所以多数情况下我们会将它和 defineAsyncComponent 搭配使用。类似 Vite 和 Webpack 这样的构建工具也支持此语法 (并且会将它们作为打包时的代码分割点)，因此我们也可以用它来导入 Vue 单文件组件：

import { defineAsyncComponent } from 'vue'const AsyncComp = defineAsyncComponent(() =>import('./components/MyComponent.vue')
)

全局注册：

app.component('MyComponent', defineAsyncComponent(() =>import('./components/MyComponent.vue')
))

也可以直接在父组件中直接定义它们：