常用知识碎片 Vue3 ref和reactive （内含其他常用知识）

本文链接：https://blog.csdn.net/qq_20770569/article/details/140243234

ref和reactive

在 Vue 3 中，ref 和 reactive 是用于创建响应式数据的不同方法，它们主要用于不同的场景：

ref

主要用于创建基本类型的响应式引用，例如字符串、数字或布尔值。
ref 返回的是一个具有 .value 属性的对象，实际使用的通常是这个 .value。
当你想要在模板中直接绑定或在计算属性中使用时，ref 非常有用。

创建响应式对象：

ref 方法创建一个响应式对象，它会跟踪对象的属性变化，并在这些变化发生时触发视图更新。要使用 ref 方法，您需要将一个对象作为参数传递给它，然后它将返回一个响应式对象。

示例：

import { ref } from 'vue';

const count = ref(0);

count.value++; // 触发视图更新

reactive

用于创建复杂对象或数组的响应式引用，它不会包裹返回值，而是直接返回原始对象或数组。
当你有一个复杂的对象结构并且希望整个对象都是响应式的时，使用 reactive 更加合适。

创建响应式对象和代理对象：

reactive 方法创建一个响应式对象和一个代理对象。代理对象会跟踪对象的属性变化，并在这些变化发生时触发视图更新。要使用 reactive 方法，您需要将一个对象作为参数传递给它，然后它将返回一个响应式对象和一个代理对象。

示例：

import { reactive } from 'vue';

const state = reactive({
  count: 0,
});

state.count++; // 触发视图更新

小总结：

ref 创建一个响应式对象，它会跟踪对象的属性变化，并在这些变化发生时触发视图更新。
reactive 创建一个响应式对象和一个代理对象，代理对象会跟踪对象的属性变化，并在这些变化发生时触发视图更新。

以上示例代码都是 Vue3 中不使用语法糖 <script setup>的用法

setup语法糖

语法糖是啥？

语法糖（Syntactic Sugar） 是编程语言中的一种设计概念，指的是那些为了提高代码的可读性和编写效率而引入的语法特性。这些特性并不会增加语言的基本功能，而是通过提供更加直观或简洁的语法来表达已有的概念，使得代码更加清晰和易于理解。
语法糖的例子包括但不限于：

对象字面量：在JavaScript中，可以直接使用 { key: value } 的形式创建对象，而不是必须调用构造函数 new Object() 并使用 this.key = value 的方式。
自动拆箱和装箱：在Java中，可以将基本类型如 int 和引用类型如 Integer 相互转换，而不需要显式地进行转换操作。
范围for循环：许多语言中，如C#和Java，支持的 foreach 循环，它简化了数组或集合的遍历，而不需要手动管理索引。
模式匹配：在一些函数式语言中，如Haskell或Scala，模式匹配允许你以更直观的方式处理数据结构，而无需显式的条件语句。

语法糖的主要目的是使代码更加人性化，减少冗余，同时保持代码的逻辑和功能不变。这有助于减少编码错误，并使代码对其他开发者更加友好。然而，过度使用语法糖也可能导致代码变得难以理解和维护，尤其是当其使用方式不常见或非直观时。因此，合理使用语法糖是编程实践中的一项重要技能。

Vue3 setup语法糖

在 Vue 3 中，setup() 函数是组合 API 的核心部分，用于定义组件的响应式状态和逻辑。setup() 是在组件实例被创建后立即执行的，它接收两个参数：props 和 context。但在实际使用中，我们通常只关心 props，因为它包含了父组件传递过来的属性。
setup() 的基本用法
在 setup() 内部，你可以使用来自 Vue 的 Composition API 的各种函数，如 ref, reactive, computed, watch 等，来定义组件的状态和行为。

Vue3 不使用setup语法糖示例：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const message = ref('Hello Vue 3 + Composition API');

    function increment() {
      count.value++;
    }

    return {
      count,
      message,
      increment
    };
  }
};
</script>

        在这个例子中，setup() 定义了一个响应式的 count 变量和一个 message 变量，以及一个 increment 方法。这些变量和方法将被暴露给模板使用。

setup() 的返回值
        setup() 函数的返回值会被合并到组件实例的公共作用域中，这意味着你可以在模板中直接访问这些返回的变量和函数。

setup() 的注意事项

setup() 函数只能在 <script setup> 语法糖中省略 return 关键字。在普通 <script> 标签中，你必须明确返回一个对象，其中包含你希望在模板中访问的所有属性和方法。
setup() 函数不能访问 this 上的任何属性或方法，因为 this 在 setup() 执行时还未被创建。
如果你使用了 props，确保在 setup(props) 中正确地接收并使用它们。

<script setup> 语法糖
        Vue 3 引入了 <script setup>，这是一种新的脚本标签，允许你直接在 <script setup> 标签内部定义和使用组合 API 的功能，而无需显式返回一个对象。这使得代码更加简洁和直接。

Vue3 使用setup语法糖示例：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);
const message = ref('Hello Vue 3 + Composition API');

function increment() {
  count.value++;
}
</script>

ref和reative主要区别

示例代码：

ref

<template>
  <div>
    Count is: {{ count }}
    <button @click="increment">Increment</button>
  </div>
</template>


<script setup>
import { ref } from 'vue';
const count = ref(0);

// 修改ref的值
function increment() {
   count.value++;
}

</script>

reactive

<template>
  <div>
    Count is: {{ state.count }}
    Name is: {{ state.name }}
    <button @click="increment">Increment</button>
  </div>
</template>


<script setup>
import { reactive } from 'vue';


// 创建一个复杂类型的响应式对象
const state = reactive({
  count: 0,
  name: 'John Doe'
});

// 修改reactive对象的属性
function increment() {
  state.count++;
}

</script>

数据类型支持:
ref() 可以用于基本数据类型（如字符串、数字、布尔值）以及复杂数据类型（如对象和数组）。当使用ref()包裹数据时，它会返回一个带有.value属性的对象，这个对象可以被Vue追踪变化。
reactive() 主要用于复杂数据类型，如对象和数组。它直接返回一个响应式的代理对象，不需要通过.value访问。
访问数据:
使用ref()创建的数据，需要通过.value属性来访问或修改其内部值。在模板语法中，ref的值会被自动解包，所以不需要显式地使用.value。
使用reactive()创建的数据可以直接像普通JavaScript对象一样访问和修改。
返回类型:
ref() 返回的是一个特殊的RefImpl对象，这个对象有一个_value属性，实际上是一个由reactive()处理过的代理对象。
reactive() 直接返回一个由Proxy处理过的响应式代理对象。
使用场景:
ref() 更适合创建单个变量或需要在组件之间共享的响应式数据。
reactive() 更适合创建包含多个属性的复杂数据结构，如状态管理中的store。
性能考量:
ref() 在大量数据操作时可能会有性能上的优势，因为它只在实际访问或修改.value时才触发依赖收集和更新。
reactive() 在处理复杂数据结构时可能更直观，但在某些情况下可能需要更多的内存，因为它创建了整个对象的响应式代理。

小结

选择使用 ref 还是 reactive 取决于具体的应用场景和个人偏好：

简单的数据绑定和共享，ref是一个好选择(在定义数组时，建议使用ref，从而可避免reactive定义时值修改导致的响应式丢失问题)；
而对于复杂的对象和状态管理，reactive可能更加合适