vuejs3 - Vue 3 中的 ref 与响应式？

Question

看一些人对 Vue 3 的预览教程的一些例子。[目前正在测试中]
我找到了两个例子:
react 性

<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 原语(String、Boolean、Number、BigInt、Symbol、null、未定义)

ref()正在调用reactive()幕后

由于reactive()适用于对象和 ref()来电reactive() , 对象适用于

但是，ref()有一个 .value用于重新分配的属性，reactive()没有这个，因此不能重新分配

采用 ref()什么时候..

它是一个原始(例如 'string' 、 true 、 23 等)

这是您需要稍后重新分配的对象(如数组 - more info here)

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 Composition API RFC: https://vuejs.org/guide/extras/composition-api-faq.html#why-composition-api