常用知识碎片 Vue3 ref和reactive （内含其他常用知识）
目录
ref和reactive
ref
reactive
总结：
setup语法糖
语法糖是啥？
Vue3 setup语法糖
Vue3 不使用setup语法糖示例：
Vue3 使用setup语法糖示例：
ref和eative主要区别
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 中不使用语法糖 的用法
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语法糖示例：
{{ message }}
Increment 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 }; } };在这个例子中，setup() 定义了一个响应式的 count 变量和一个 message 变量，以及一个 increment 方法。这些变量和方法将被暴露给模板使用。
setup() 的返回值setup() 函数的返回值会被合并到组件实例的公共作用域中，这意味着你可以在模板中直接访问这些返回的变量和函数。
setup() 的注意事项- setup() 函数只能在 语法糖中省略 return 关键字。在普通 标签中，你必须明确返回一个对象，其中包含你希望在模板中访问的所有属性和方法。
- setup() 函数不能访问 this 上的任何属性或方法，因为 this 在 setup() 执行时还未被创建。
- 如果你使用了 props，确保在 setup(props) 中正确地接收并使用它们。
语法糖
Vue 3 引入了 ，这是一种新的脚本标签，允许你直接在 标签内部定义和使用组合 API 的功能，而无需显式返回一个对象。这使得代码更加简洁和直接。
Vue3 使用setup语法糖示例：
{{ message }}
Increment import { ref } from 'vue'; const count = ref(0); const message = ref('Hello Vue 3 + Composition API'); function increment() { count.value++; }ref和reative主要区别
示例代码：
ref
Count is: {{ count }} Increment import { ref } from 'vue'; const count = ref(0); // 修改ref的值 function increment() { count.value++; }reactive
Count is: {{ state.count }} Name is: {{ state.name }} Increment import { reactive } from 'vue'; // 创建一个复杂类型的响应式对象 const state = reactive({ count: 0, name: 'John Doe' }); // 修改reactive对象的属性 function increment() { state.count++; }- 数据类型支持:
- 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可能更加合适
- 数据类型支持:
