Vue 3中的参考文献和活性文献？

Question

看看一些人的Vue 3预览教程的一些例子。

我发现了两个例子：

反应型

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
import { reactive, computed } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    })

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}
</script>

参考

<template>
  <div>
    <h2 ref="titleRef">{{ formattedMoney }}</h2>
    <input v-model="delta" type="number">
    <button @click="add">Add</button>
  </div>
</template>

<script>
import { ref, computed, onMounted } from "vue";

export default {
  setup(props) {
    // State
    const money = ref(1);
    const delta = ref(1);

    // Refs
    const titleRef = ref(null);

    // Computed props
    const formattedMoney = computed(() => money.value.toFixed(2));

    // Hooks
    onMounted(() => {
      console.log("titleRef", titleRef.value);
    });

    // Methods
    const add = () => (money.value += Number(delta.value));

    return {
      delta,
      money,
      titleRef,
      formattedMoney,
      add
    };
  }
};
</script>

Answer 1

关键点

• reactive()只接受对象，不接受 JS原语(字符串、布尔值、数字、BigInt、符号、null、未定义)
• ref()正在幕后调用reactive()
• 由于reactive()适用于对象，而ref()调用reactive()，因此对象对两者都适用。
• 但是，ref()有一个用于重新分配的.value属性，reactive()没有此属性，因此不能重新分配。

使用

ref()时..。

• 它是一个原语(例如'string'__、true__、23__等)
• 这是一个需要稍后重新分配的对象(就像数组- 这里有更多的信息)

reactive()时..。

• 这是一个不需要重新分配的对象，您希望避免ref()的开销

摘要

由于ref()支持所有对象类型，并允许与.value重新分配，因此它似乎是可行的。ref()是一个很好的起点，但是当您习惯了这个API时，要知道reactive()的开销较少，您可能会发现它更能满足您的需要。

ref()用例

您将始终将ref()用于原语，但对于需要重新分配的对象，ref()是很好的，就像数组一样。

setup() {
    const blogPosts = ref([]);
    return { blogPosts };
}
getBlogPosts() {
    this.blogPosts.value = await fetchBlogPosts();
}

上面提到的reactive()需要重新分配属性，而不是整个对象。

setup() {
    const blog = reactive({ posts: [] });
    return { blog };
}
getBlogPosts() {
    this.blog.posts = await fetchBlogPosts();
}

reactive()用例

reactive()的一个很好的用例是一组归在一起的原语：

const person = reactive({
  name: 'Albert',
  age: 30,
  isNinja: true,
});

上面的代码感觉比

const name = ref('Albert');
const age = ref(30);
const isNinja = ref(true);

有用的链接

如果你仍然迷失方向，这个简单的指南帮助了我：https://www.danvega.dev/blog/2020/02/12/vue3-ref-vs-reactive/

只使用ref()：https://dev.to/ycmjason/thought-on-vue-3-composition-api-reactive-considered-harmful-j8c的参数

为什么reactive()和ref()如此存在的背后的决策和其他伟大的信息，Vue组合API：https://vuejs.org/guide/extras/composition-api-faq.html#why-composition-api

Answer 2

ref和reactive有一些相似之处，因为它们都提供了存储数据的方法，并允许数据是被动的。

然而：

高层次差异：

不能对原语(字符串、数字、布尔值)使用反应性()--这就是您需要参考的原因，因为您将遇到需要使用“反应性布尔”的情况，例如… 当然，您可以创建一个对象，该对象包装原语值并生成反应性()：

const wrappedBoolean = reactive({
  value: true
})

就这样，你重新创造了裁判。

资料来源: Vue论坛讨论。

活性

reactive接受该对象并将一个反应性的proxy返回到原始对象。

示例

import {ref, reactive} from "vue";

export default {
  name: "component",
  setup() {
    const title = ref("my cool title")
    const page = reactive({
      contents: "meh?",
      number: 1,
      ads: [{ source: "google" }],
      filteredAds: computed(() => {
        return ads.filter(ad => ad.source === "google")
      })
    })
    
    return {
       page, 
       title
    }
  }
}

解释

在上面，每当我们想要更改或访问page的属性时，

假设page.ads，page.filteredAds将通过代理进行更新。

Answer 3

我将简单地解释为什么有两种方法来创建一个反应状态：

其他答案已经显示出两者的不同之处。

reactive：创建一个反应性状态。返回对象的反应性代理：

import { reactive } from 'vue'

const reactiveObj = reactive({ count: 0 })
reactiveObj.count++

使用Options，我们可以将反应性状态保持在data()__中。使用复合API，我们可以通过reactive API实现同样的目标。到目前为止还不错但是..。

为什么我们需要ref ?？

仅仅因为reactive有一些限制，例如：

• 反应性损失：

const state = reactive({ count: 0 })

// the function receives a plain number and
// won't be able to track changes to state.count
callSomeFunction(state.count)

const state = reactive({ count: 0 })
let { count } = state
// does not affect original state
count++

let state = reactive({ count: 0 })

// this won't work!
state = reactive({ count: 1 })

• 它不能保存基本类型，如字符串、数字或布尔值。

因此，Vue提供了ref来解决reactive的局限性。

ref()接受参数并返回包装在具有.value属性的ref对象中的参数：

const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

参考文献可：

• 持有任何值类型
• 主动替换整个对象：

const objectRef = ref({ count: 0 })

// this works reactively
objectRef.value = { count: 1 }

• 被传递到函数或从普通对象中去结构化，而不失去反应性。

const obj = {
  foo: ref(1),
  bar: ref(2)
}

// the function receives a ref
// it needs to access the value via .value but it
// will retain the reactivity connection
callSomeFunction(obj.foo)

// still reactive
const { foo, bar } = obj

我应该总是使用ref吗？

个人意见如下

大多数尝试过这两种方法的开发人员都建议使用我阅读过的文章中的ref。

但就我个人而言，我认为ref与reactive具有相同的限制，如果使用不当，您很容易陷入“反应性损失”的问题。ref也有一些行为，如：

• 在模板中展开，但这只发生在顶级属性上。
• reactive内部展开
• 当从数组或本机集合类型(如Map )访问ref时，不执行展开操作。
• 参考文献同步

另外，每次都要处理.value有点让人费解，Vue知道这一点，而且在撰写本文的这个时候，有一个旨在提供解决方案的RFC -反应性变换。

我希望您现在对reactive和ref有了更好的理解，但我想值得一提的是，您应该知道更多用于反应状态的API: readonly、shallowRef、shallowReactive、shallowReadonly、unref等等。