이 글에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!