Ref

本文将为您详细介绍 Vue 3 中的浅层响应式——shallowReactive 的定义、使用方法以及常见问题的解决方案。通过学习本文，您将能够更好地掌握 Vue 3 中的响应式原理，提高 Vue 开发的效率。 shallowReactive 是什么 在 Vue 3 中，我们可以使用 shallowReactive 来创建一个响应式对象，与 reactive 不同， shallowReactive 会忽略对象中的嵌套属性的响应式更新，只有对象的直接属性发生变化时才会触发更新。 shallowReactive 的使用场景通常是，当我们需要创建一个响应式对象，但是不希望其嵌套属性也响应式更新时，可以使用该 API。 shallowReactive 用法例子 让我们来看一个简单的使用 shallowReactive 的例子： import { shallowReactive } from "vue"; const state = shallowReactive({ name: "小明", address: { city: "上海", state: "上海", }, }); // 修改state对象的直接属性 state.name = "小红"; // 触发响应式更新 // 修改state对象的嵌套属性 state.address.city = "北京"; // 不会触发响应式更新 在上面的代码中，我们使用 shallowReactive 创建了一个响应式对象 state，其中包含一个直接属性 name 和一个嵌套属性 address。当我们修改 state.name 属性时，由于该属性是直接属性，所以会触发响应式更新；当我们修改 state.address.city 属性时，由于该属性是嵌套属性，所以不会触发响应式更新。 除了上述例子中的直接属性和嵌套属性的修改外，我们还可以使用 Vue.set 方法来给对象添加新属性。当我们使用 Vue.set 方法添加新属性时，该属性会被视为直接属性，因此会触发响应式更新。让我们来看一个示例： import { shallowReactive } from "vue"; const state = shallowReactive({ name: "小明", address: { city: "上海", state: "上海", }, }); // 添加新属性 Vue.set(state, "age", 18); // 触发响应式更新 在上面的代码中，我们使用 Vue.set 方法向 state 对象添加了一个新属性 age，由于该属性是直接属性，所以会触发响应式更新。 ...

本文将介绍 Vue 3 中如何在组合式 API 中获取循环中的组件的 ref。我们将通过在父组件中使用 ref 指令和 v-for 指令来声明和动态创建一个引用，然后在 onMounted 生命周期钩子中循环遍历数据来获取每个子组件的引用并存储在对应的引用中。这种方法可以让我们轻松地在循环中获取子组件的引用并进行操作，非常方便实用。 基本用法 在 Vue 3 中，可以使用 ref 和 v-for 指令来在循环中获取组件的引用。 首先，在组件中，使用 ref 指令来声明一个引用： <template> <div ref="myComponent"></div> </template> 然后，在包含循环的父组件中，可以使用 v-for 指令来遍历数据并在循环中获取子组件的引用： <template> <div v-for="item in items" :key="item.id"> <my-component ref="myComponentRefs[item.id]"></my-component> </div> </template> <script> import { ref, onMounted } from "vue"; export default { setup() { const myComponentRefs = ref({}); const items = [{ id: 1 }, { id: 2 }, { id: 3 }]; onMounted(() => { items.forEach(item => { myComponentRefs.value[item.id] = myComponentRefs.value[item.id].$refs.myComponent; }); }); return { items, myComponentRefs, }; }, }; </script> 上面的例子中，使用 ref 指令在父组件中声明了一个名为 myComponentRefs 的引用。然后，在循环中，使用 myComponentRefs[item.id] 来动态创建一个引用来存储子组件的引用。在 onMounted 生命周期钩子中，通过循环遍历 items 数组来获取每个子组件的引用并存储在对应的引用中。 ...