[JavaScript知识库]vue3Composition API（setup语法糖写法）

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

<template>
  <my-component :num="num" @click="addNum" />
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import MyComponent from './MyComponent .vue';

  // 像在平常的setup中一样的写,但是不需要返回任何变量
  const num= ref(0)       //在此处定义的 num 可以直接使用
  const addNum= () => {   //函数也可以直接引用,不用在return中返回
    num.value++
  }
</script>

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

1. 响应式数据

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

<template>
  <h3>信息展示</h3>
  <div>
    <span>姓名：</span>
    <span>{{ data.name }}</span>
    <br />
    <span>年龄：</span>
    <span>{{ data.age }}</span>
  </div>
  <button @click="data.name = '李四">修改姓名</button>
  <br />
  <button @click="data.age = '25'">修改年龄</button>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
interface DataType {
  name: string
  age: string
}
// 创建响应式对象
const data = reactive<DataType >({
  name: '张三',
  age: '18',
})
</script>

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

<template>
  <h3>信息展示</h3>
  <div>
    <span>姓名：</span>
    <!-- 在模板中，Vue 会自动帮助我们为 ref 进行解包，所以不需要使用 ref.value 的形式 -->
    <span>{{ name }}</span>
    <br />
    <span>年龄：</span>
    <span>{{ age }}</span>
  </div>
  <button @click="editName">修改姓名</button>
  <br />
  <button @click="editAge">修改年龄</button>
</template>
<script setup lang="ts">
import { ref } from 'vue'
// 创建响应式对象
const name = ref('张三')
const age = ref('18')
const editName = () => {
  // 通过 ref 创造的响应式对象，我们需要通过 ref.value 的方式访问
  name.value = '李四'
}
const editAge = () => {
  age.value = '25'
}
</script>

• 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的用法

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属性的名称一致即可。如下：

<template>
  <h3 ref="nameRef">张三</h3>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const nameRef = ref(null)
onMounted(() => {
  console.log(nameRef.value) // <h3>张三</h3>
})
</script>