实际应用Vue3组合式API踩坑—响应式

API风格

之前的Vue2是没有这种代码风格的选择的，但是在Vue3中的API分为两种：

1. 选项式

2. 组合式

   > 选项式：类似于原来Vue2中的模式，使用过Vue2的朋友应该很熟悉这种模式。所有的东西都是分类放好的，按类别放就🆗了。

   > 组合式：一种新的代码风格，更加贴合JS原生的写法。同时也是Vue官方推荐的一种API风格。我个人也是使用过Vue2，现在学习Vue3那就使用组合式进行学习了，新手建议选项式，想要更深入的学习，那组合式更适合。

对了，在最近系统的学习和使用前，之前也有项目赶鸭子上架过。项目组成就有点混乱，选项式和组合式的代码风格混合使用。哈哈哈，两种API都是Vue3支持的，所以混合是可以的，不过不建议这么做，如果是老项目升级那就当我没说了。

举个栗子

选项式

<script>
export default {
  data() {
    return {
      name: "kobe"
    }
  }
}
</script>

组合式

<script setup lang="ts">
import { reactive,ref } from 'vue'
const obj = reactive({
  name: "kobe"
})
const name = ref("kobe")
</script>

最近开始使用组合式API后，我就在想，响应式是使用 reactive || ref 的API绑定；那应该要怎么用呀？

关于reactive || ref

引用官方定义

我们可以使用 reactive() 函数创建一个响应式对象或数组；同理，我们可以使用 ref() 函数创建一个任何类型的响应式。显然ref()可操作性更大。

响应式对象其实是 JavaScript Proxy，其行为表现与一般对象相似。不同之处在于 Vue 能够跟踪对响应式对象属性的访问与更改操作。

值得注意的是响应式申明了之后返回的是一个原始对象的 Proxy，它和原始对象是不相等的

那么问题来了，我能不能这么写呢？

<script setup lang="ts">
import { ref } from 'vue'
let name = "kobe"
const userName = ref(name)
//修改name,这时页面会变吗？答案是!不会。
name = "curry"
</script>
<template>
<h1>{{userName}}</h1>
</template>

响应式失效了？

为什么我把name使用ref()申明了响应式，修改了name不能同步响应到页面上的userName?

官方文档中有这么一句话：

只有代理对象是响应式的，更改原始对象不会触发更新。因此，使用 Vue 的响应式系统的最佳实践是 仅使用你声明对象的代理版本。

关键点是，响应式申明了之后返回的是一个原始对象的 Proxy，它和原始对象是不相等的！！！

响应式是数据与函数之间响应，而不是数据与数据响应。你修改了原始数据，而你申明返回的响应式数据 != 原始数据的，你是无法做到修改一个数据导致另一个数据变化的，JS语言做不到，Vue是基于JS来搭建的框架，那么JS不做不到的，Vue肯定也是做不到的。

正确写法应该是：

//修改name
userName.value = "curry"

那么问题又来了

如果原始数据变动了，我怎么让页面上的响应式变呢？不是说更改原始对象不会触发更新吗？数据与数据确实不能达成响应式，但是我们可以使用函数来达成响应式。可以这么写：

<script setup lang="ts">
import { ref,watchEffect } from 'vue'
let name = "kobe"
const userName = ref(name)
watchEffect(() => {
    userName.value = name
})
//修改name,这时页面会变吗？答案是!会。
name = "curry"
</script>
<template>
<h1>{{userName}}</h1>
</template>

我们借用watchEffect()达到原始数据变动，响应式数据变动。这个API是会监控所有里面被使用数据的改动，每一次改动都会触发。这样一来我们原始数据改动，重新赋值给代理版本，这样页面也能响应式渲染数据了。