vue3Composition API（setup语法糖写法）

• 我们在写Vue2的时候，编写组件的方式是使用Options API，这种方式的特点就是在对应的属性编写对应的功能模块，例如在data中定义数据、methods定义方法等；这种方法的弊端就是同一功能的代码逻辑被拆分到各个属性中，影响代码的阅读。
• Vue3中提供的Composition API可以帮助我们优雅的组织我们的代码，让相关功能的代码更加有序的组织在一起。只需在script标签中添加setup，组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default ，甚至是自定义指令也可以在我们的template中自动获得。

接下来我们就来介绍一下如何采用Composition API（setup语法糖）的方式编写代码。

1. 响应式数据

• reactive API用于创建响应式的对象或者数组，实际上该方法的内部就是基于ES6的Proxy实现的。如下代码：

• ref API, 我们使用reactive只能对Object或者Array类型的数据进行劫持，如果我们想要对普通数据类型的数据进行劫持，可以使用ref API，例如如下代码：

• readonly API，有时我们希望我们传递给其他组件数据时，往往希望其他组件使用我们传递的内容，但是不允许它们修改，这个时候就可以使用readonly API，该API可以创建一个不可修改的对象。
  我们看下面这段代码：

import { ref, readonly } from 'vue'
// 创建响应式对象
const name = ref('张三')
const age = ref('18')
const readonlyName = readonly(name)
const editName = () => {
  // 通过 ref 创造的响应式对象，我们需要通过 ref.value 的方式访问
  name.value = '李四'
}

我们修改name时，readonlyName的值也会跟着进行改变，但是直接修改readonlyName并不会生效。

• toRefs和toRef，toRefs和toRef用于将reactive创建的响应式代码解构成响应式的数据；如果直接使用ES6的语法进行解构，解构出的数据并不是响应式的。如下：

import { toRefs, reactive } from 'vue'
const user = reactive({ name: '张三', age: '18' })
// user 下的属性通过 toRefs 与解构后的数据建立了链接，任何一个修改都会引起另一个的变化
const { name, age } = toRefs(user)
const editName = () => {
  name.value = '李四'
}
const editAge = () => {
  age.value = '25'
}

如果想解构单个数据可以使用toRef，示例代码如下：

const name = toRef(user, 'name')
const age = toRef(user, 'age')

2. 监听器

Vue3的composition API中提供了两个用于监听数据变化的API，分别是watchEffect和watch，在写法和使用上有所区别。

watch用法

• 监听 ref 类型：

import { ref, watch } from 'vue';
const name = ref('张三')
watch(name, (newValue, oldValue) => {
 console.log(`原值为${oldValue}`)
 console.log(`新值为${newValue}`)
})

• 监听 reactive类型：

import { reactive, watch } from 'vue';
const data = reactive({
  name: '张三',
  age: '18'
})
watch(data, (newValue, oldValue) => {
  console.log('监听data', newValue.name, newValue.age)
})

• 监听对象单个属性

import { reactive, watch } from 'vue';
const data = reactive({
  name: '张三',
  age: '18'
})
watch(() => data.name, (newValue, oldValue) => {
  console.log(`原值为${oldValue}`)
  console.log(`新值为${newValue}`)
})

• 监听组件props

const props = defineProps({
  name: { type: String, required: true }
})

watch(() => props.name, (newValue) => {})

• 监听多个数据
  对于多个数据源，需要传入数组形式，注意 回调函数的参数 newValue 此时为数组，可以将数据的新值解构出来

watch([name, age], ([newName, newAge], [oldName, oldAge]) => {
  console.log(newName, newAge)
})

• 监听对象的多个特定属性，或不同对象的几个属性

watch([
  () => obj1.a, 
  () => obj2.b
], (newValArr) => {
  console.log(...newValArr)
})

watchEffect 它与 watch 的区别主要有以下几点：

1. 不需要指定需要监听的数据，会自动监听回调函数中的响应式数据
2. 每次初始化时会立刻执行
3. 无法获取到原值，只能得到变化后的值

import { reactive, watchEffect } from 'vue';

const data = reactive({
  name: '张三',
  age: '18'
})

watchEffect(() => {
  console.log(data.name);
  console.log(data.age);
})

3.生命周期

Vue3的composition API没有生命周期钩子选项，但是提供了onBeforeMount、onMounted等函数来注册声明周期钩子，提供的声明周期函数如下表所示：

选项式API	Hook inside setup	触发时机
beforeMount	onBeforeMount	组件挂载之前触发
mounted	onMounted	组件挂载后触发
beforeUpdate	onBeforeUpdate	组件更新之前触发
updated	onUpdated	组件更新后触发
beforeUnmount	onBeforeUnmount	组件卸载之前触发
unmounted	onUnmounted	组件卸载后触发

下面代码展示了部分api的用法

import { onMounted, onUnmounted, onUpdated } from 'vue';

onMounted(() => {
  console.log('onMounted')
})
onUpdated(() => {
  console.log('onUpdated')
})
onUnmounted(() => {
  console.log('onUnmounted')
})

4.模板ref($refs的代替品)

由于Vue3的composition API无法使用this，所以说this.$refs并不可以用，那我们怎么获取到组件或者元素呢？其实非常简单，我们需要定义个ref对象，名称与模板中ref属性的名称一致即可。如下：