ref vs Vue 3中的反应式？

Question

查看一些有关Vue 3的预览教程的示例。[当前为beta版]

我找到了两个例子：

反应性

<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

ref和reactive之间有一些相似之处，它们两者都提供了一种存储数据并允许该数据具有反应性的方法。

但是：

高级别差异：

您不能在基元（字符串，数字，布尔值）上使用react（）-这就是您需要引用的内容，例如，在某些情况下，您需要使用“反应性布尔值”……

当然，您可以创建一个包装原始值的对象并使该对象成为react（）：

const wrappedBoolean = reactive({
  value: true
})

就这样，您重新发明了裁判。

Source: Vue forum discussion

活动

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 2

要点

• ref()正在幕后给reactive()打电话
• reactive()对JS原语（字符串，布尔值，数字，BigInt，符号，空值，未定义）
不起作用。

使用

ref()何时..

• 这是原始的（例如'string'，true，23等）

reactive()何时..

• 这是一个对象

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/

Answer 3

在下面，您可以在上部和其他替代性反应式语法的下方看到使用“反应式引用”的示例。

//reactivity with ref syntax

import { ref, computed } from vue

export default {
  setup() {
    const capacity = ref(4)
    const members = ref(["Tim", "John", "Andr"])
    const simpleComputed = computed(() => {
      return capacity.value - members.value.length
    })

    return { capacity, members, simpleComputed }
  }
}


//reactivity with reactive syntax

import { reactive, computed } from vue

export default {
  setup() {
    const event = reactive({
      capacity: 4,
      members: ["Tim", "John", "Andr"]
      simpleComputed: computed(() => {
        return event.capacity - event.capacity.length
      }
    })
    return { event }
  }
}

如上面底部代码中所示，我创建了一个新的事件常量，该常量接受一个纯JavaScript对象并返回一个反应对象。在常规组件语法中使用data选项可能看起来很熟悉，在该语法中我也发送了一个对象。但是，正如您在上面看到的，我也可以将我们的计算属性发送到该对象中。您还应该注意，当我使用这种语法时，在访问属性时我们不再需要编写.value。这是因为我只是访问事件对象上的对象属性。您还应该注意，我们将退回整个活动

这两种语法对于使用均有效，并且都不被视为最佳实践

Answer 4

ref / reactive都用于创建跟踪变化的对象。

Ref：

它接受一个基本参数，并返回一个反应性可变对象。该对象具有单个属性“值”，它将指向它所采用的参数。

反应式：

它将JavaScript对象作为参数，并返回该对象的基于代理的响应式副本。

参考与反应式：

通常，ref和react都已用于创建反应对象，其中ref用于使基本值具有反应性（布尔值，Number，String）。但是反应式不适用于基元，而不适用于对象。

有关更多详细信息，请参见Ref vs Reactive