Vue3의 Ref VS 반응성, 차이점은 무엇입니까?

이 글에서는 Vue.js 3에서 ref와 Reactive에 대해 알아보고 ref와 Reactive의 차이점을 소개하겠습니다. 모두에게 도움이 되길 바랍니다!

핵심 포인트

reactive()는 객체만 매개변수로 허용하고 JS 기본 유형(String, Boolean, Number, BigInt, Symbol, null, undefine)을 지원하지 않습니다. ) . [관련 권장 사항: 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 튜토리얼

]

ref()는 reactive()</ 때문에 백그라운드<p><a href="https://www.php.cn/course.html" target="_blank" textvalue="编程视频">에서 <code>reactive()를 호출합니다. code>는 객체를 지원하고 ref()는 내부적으로 reactive()를 호출하므로 두 메서드 모두 객체를 지원합니다

그러나 ref()에는 .value 속성을 ​​사용하여 재할당할 수 있지만 reactive()는 재할당할 수 없습니다(응답성이 손실됨) 🎜🎜🎜🎜사용 시나리오🎜🎜🎜🎜 🎜 ref()🎜🎜🎜숫자 유형이 JS 기본 유형(예: 'string', true, 23</)일 때 사용됩니다. code>) 🎜🎜객체를 할당한 후 나중에 다시 할당해야 하는 경우(예: 배열 - <a href="https://github.com/vuejs/docs-next/issues/801#issuecomment-757587022" target= "_blank" rel="noopener noreferrer">자세한 내용은 여기를 참조하세요🎜)🎜🎜<code>🎜reactive()🎜🎜🎜숫자 유형이 객체이고 다시 할당할 필요가 없는 경우 사용합니다. ref() 는 추가 오버헤드 없이 내부적으로 reactive()를 호출합니다🎜🎜🎜🎜Summary🎜🎜🎜🎜ref()가 올바른 것 같습니다 모든 개체 유형을 지원하고 .value를 통해 다시 할당할 수 있기 때문에 선택합니다. ref()는 괜찮지만 API에 익숙해지면 reactive()가 덜 비싸고 요구 사항에 더 적합하다는 것을 알게 될 것입니다. 🎜🎜🎜🎜ref() 케이스 🎜🎜🎜🎜는 ref()를 사용하여 초기화되지만 ref()는 재할당이 필요한 객체에 더 친숙합니다. 배열로. 🎜

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

🎜위에서 Reactive()를 사용하면 객체 할당 대신 속성 할당이 필요합니다. 🎜

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

🎜🎜🎜reactive() 케이스 🎜🎜🎜🎜reactive()는 동일한 데이터 그룹을 초기화하는 데 적합합니다. 🎜rrreee🎜위 코드는 다음 코드보다 더 논리적입니다. 🎜rrreee 🎜더 보기 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 Vue3의 Ref VS 반응성, 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!