Ref VS reaktiv in Vue3, was sind die Unterschiede zwischen ihnen?

Dieser Artikel führt Sie durch Ref und Reactive in Vue.js 3 und stellt den Unterschied zwischen Ref und Reactive vor. Ich hoffe, dass er für alle hilfreich ist!

Wichtige Punkte

reactive() akzeptiert nur Objekte als Parameter und unterstützt keine primitiven JS-Typen (String, Boolean, Number, BigInt, Symbol, null, undefiniert). ). [Verwandte Empfehlung: reactive() 只接受对象作为参数， 不支持 JS 原始类型 （String， Boolean，Number，BigInt，Symbol，null，undefined）。【相关推荐：vue.js教程】

ref() 会在后台调用 reactive()

因 reactive() 支持对象，而 ref() 内部调用 reactive()，故两个方法都支持对象

但是， ref() 有一个 .value 属性可以用来重新赋值，而 reactive() 不可重新赋值（会丢失响应性）

使用场景

<strong>ref()</strong>

当数值类型是 JS 原始类型时使用 (例如 'string', true, 23)

当赋值对象，且后续需要被重新赋值时 (例如一个数组 - 更多请见这里)

<strong>reactive()</strong>

当数值类型是对象，且不需要重新赋值时使用，ref() 内部也是调用 reactive()，无需徒增开销

总结

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()vue.js Tutorial

]

ref() ruft reactive() im Hintergrund auf

wegen reactive() code> Unterstützt Objekte und <code>ref() ruft intern reactive() auf, sodass beide Methoden Objekte unterstützen

Allerdings hat ref() eine Das Attribut .value kann zur Neuzuweisung verwendet werden, reactive() kann jedoch nicht neu zugewiesen werden (Reaktionsfähigkeit geht verloren) 🎜🎜🎜🎜Verwendungsszenarien🎜🎜🎜🎜 🎜 ref()🎜🎜🎜Wird verwendet, wenn der numerische Typ ein primitiver JS-Typ ist (z. B. 'string', true, 23 Code>) 🎜🎜Wenn ein Objekt zugewiesen wird und anschließend neu zugewiesen werden muss (z. B. ein Array – <a href="https://github.com/vuejs/docs-next/issues/801#issuecomment-757587022" target="_blank" rel="noopener noreferrer">Weitere Informationen finden Sie hier🎜)🎜🎜<code>🎜reactive()🎜🎜🎜Verwenden Sie, wenn der numerische Typ ein Objekt ist und nicht neu zugewiesen werden muss, ref() ruft auch reactive() intern auf, ohne zusätzlichen Overhead🎜🎜🎜🎜Zusammenfassung🎜🎜🎜🎜ref() scheint das Richtige zu sein Wahl, da es alle Objekttypen unterstützt und über .value neu zugewiesen werden kann. ref() ist in Ordnung, aber sobald Sie sich mit der API vertraut gemacht haben, stellen Sie fest, dass reactive() kostengünstiger ist und Sie möglicherweise feststellen, dass dies für Ihre Anforderungen besser geeignet ist. 🎜🎜🎜🎜ref() case 🎜🎜🎜🎜 wird mit ref() initialisiert, aber ref() ist benutzerfreundlicher für Objekte, die neu zugewiesen werden müssen, wie z als Arrays. 🎜

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

🎜Wenn oben reactive() verwendet wird, ist eine Attributzuweisung anstelle einer Objektzuweisung erforderlich. 🎜

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

🎜🎜🎜reactive() case 🎜🎜🎜🎜reactive() eignet sich zum Initialisieren einer Gruppe von Daten, die zu derselben gehören: 🎜rrreee🎜Der obige Code ist logischer als der folgende 🎜rrreee 🎜Weitere Informationen zum Programmieren finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonRef VS reaktiv in Vue3, was sind die Unterschiede zwischen ihnen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!