Vue3에서 toRef 및 toRefs 함수를 사용하는 방법
- WBOY앞으로
- 2023-05-16 15:46:271432검색
toRef 함수 사용법
먼저 toRef 함수에는 두 개의 매개변수가 있습니다.
toRef(작업 객체, 객체 속성)
다음으로 toRef 함수를 사용하여 이전과 마찬가지로 페이지에 사용자의 이름과 나이가 표시됩니다.
<template>
<div>
<h2>toRef toRefs 函数</h2>
<p>姓名：{{boy_toRef}}</p>
<p>年龄：{{boy.age}}</p>
</div>
</template>
<script>
import { toRef } from 'vue'
export default {
setup() {
const boy = { // 创建一个用户对象
name: '我是????????.', // 用户名称
age: 10 // 用户年龄
}
// 使用 toRef 函数包裹，操作 boy 对象的 name 属性
const boy_toRef = toRef(boy, 'name')
console.log(boy_toRef) // 我们直接打印看一下包裹后的数据格式
return { boy, boy_toRef }
}
}
</script>코드를 저장하고 페이지를 새로고침하세요.
데이터의 구조를 볼 수 있습니다. 값은 바로 boy 아래의 이름 속성 값입니다. 따라서 다음으로 버튼을 작성하고 버튼을 클릭한 후 이름 값을 수정합니다.
<template>
<div>
<h2>toRef toRefs 函数</h2>
<p>姓名：{{boy_toRef}}</p>
<p>年龄：{{boy.age}}</p>
<el-button type="primary" @click="btn">修改 name</el-button>
</div>
</template>
<script>
import { toRef } from 'vue'
export default {
setup() {
const boy = {
name: '我是????????.',
age: 10
}
// 这个 boy_toRef 就是被 toRef 函数操作过的 boy 的 name 值
const boy_toRef = toRef(boy, 'name')
const btn = () => {
boy_toRef.value = '????????.' // 把 name 修改成 ????????.
console.log(boy_toRef) // 修改完成打印一下结果
}
return { boy, btn, boy_toRef }
}
}
</script>코드를 저장하고 페이지를 새로고침한 후 버튼을 클릭하면 페이지 효과를 확인할 수 있습니다.
스크린샷을 보면 실제로 boy_toRef의 값이 수정되었으나 페이지가 변경되지 않았으며 페이지에 오류도 없는 것을 확인할 수 있습니다.
이유는 무엇인가요? 사실 이것은 버그가 아닙니다. 이 블로그 게시물 시작 부분에서 말했듯이 toRef 함수는 소스 데이터와 상호 작용합니다. 반응형 데이터를 수정하면 소스 데이터가 수정되지만 수정해도 오류가 발생하지는 않습니다. 업데이트할 뷰 레이어 데이터가 toRef 함수의 역할입니다. 실제로 위 스크린샷에서는 뷰에 데이터 업데이트가 없다는 것을 알 수 있지만 소스 데이터가 수정되는 것을 어떻게 볼 수 있습니까? 중요하지 않습니다. 이 질문에 대답하기 전에 먼저 원본 데이터가 무엇인지 알아야 합니다.
위 코드와 마찬가지로
const boy = {
name: '我是????????.',
age: 10
}
const boy_toRef = toRef(boy, 'name')toRef 함수는 소년 객체를 래핑하므로 소년 객체가 소스 데이터입니다.
따라서 원본 데이터가 변경되었는지 확인하려면 버튼을 클릭한 후 소년 개체를 인쇄하여 변경되었는지 관찰해야 합니다.
<template>
<div>
<h2>toRef toRefs 函数</h2>
<p>姓名：{{boy_toRef}}</p>
<p>年龄：{{boy.age}}</p>
<el-button type="primary" @click="btn">修改 name</el-button>
</div>
</template>
<script>
import { toRef } from 'vue'
export default {
setup() {
const boy = {
name: '我是????????.',
age: 10
}
const boy_toRef = toRef(boy, 'name') // 这个 boy_toRef 就是被 toRef 函数操作过的 boy 的 name 值
const btn = () => {
boy_toRef.value = '????????.' // 把 name 修改成 ????????.
console.log(boy_toRef) // 修改完成打印一下结果
console.log(boy) // 修改完成打印一下boy结果
}
return { boy, btn, boy_toRef }
}
}
</script>코드를 저장하고 페이지를 새로고침한 후 버튼을 클릭하여 이름 값을 수정한 후 콘솔에 출력된 boy 객체를 확인하세요.
소년 개체의 이름 값이 I am ????????.에서 ????????.로 변경되었지만 페이지가 여전히 업데이트되지 않은 것을 확인했습니다.
기억하세요!
toRef 함수는 소스 데이터와 상호 작용합니다. 반응형 데이터를 수정하면 소스 데이터가 수정되지만 뷰 레이어 데이터는 업데이트되지 않습니다.
ref 함수 확인
ref 함수는 객체의 속성 값을 반응형 데이터로 변환할 수 있습니다. 반응형 데이터를 수정하면 원본 데이터에는 영향을 미치지 않지만 뷰 레이어의 데이터는 업데이트됩니다. 맞나요? 이전 섹션에서는 테스트하지 않았으므로 여기서도 테스트하겠습니다.
페이지 이름을 수정하려면 버튼을 클릭하세요.
<template>
<div>
<h2>ref reactive 函数</h2>
<p>姓名：{{name_ref}}</p>
<el-button type="primary" @click="btn">修改信息</el-button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const name = '我是????????.'
const name_ref = ref(name)
const btn = () => {
name_ref.value = '????????.'
console.log(name_ref) // 打印一下被ref包裹的数据
console.log(name) // 打印一下源数据
}
return { name_ref, btn }
}
}
</script>코드를 저장하고, 페이지를 새로 고치고, 버튼을 클릭하여 페이지 콘솔에 인쇄된 결과를 봅니다. 주로 ref 함수로 래핑된 데이터가 성공적으로 수정되었는지, 소스 데이터가 성공적으로 수정되었는지 확인하기 위한 것입니다. 최종 페이지가 수정되었는지 여부는 아래 스크린샷을 참조하세요.
자, 위 스크린샷을 통해 다들 이해해주시길 바랍니다!
그러니 다시 한번 기억해주세요!
ref 함수는 개체의 속성 값을 반응형 데이터로 변환할 수 있습니다. 반응형 데이터를 수정해도 소스 데이터에는 영향을 미치지 않지만 뷰 레이어의 데이터는
toRefs 함수
toRefs 함수로 업데이트됩니다. 사용법은 실제로 toRef 함수와 유사합니다.
toRefs 함수는 여러 데이터를 해당 데이터에 일괄적으로 설정하는 데 사용됩니다.
toRefs 함수는 원본 데이터와 상호 작용합니다. 반응형 데이터를 수정하면 원본 데이터에 영향을 주지만 뷰 레이어는 업데이트되지 않습니다.
toRefs 함수는 다른 반응형 데이터와도 상호 작용할 수 있으므로 뷰 레이어 데이터를 더 쉽게 처리할 수 있습니다.
toRefs 함수는
기존 방식을 사용하여 객체를 만든 다음 toRefs 함수로 래핑하여 페이지에 표시합니다.
<template>
<div>
<h2>toRef toRefs 函数</h2>
<p>姓名：{{boy_toRefs.name}}</p>
<p>年龄：{{boy_toRefs.age}}</p>
</div>
</template>
<script>
import { toRefs } from 'vue'
export default {
setup() {
const boy = {
name: '我是????????.',
age: 10
}
const boy_toRefs = toRefs(boy) // 将 boy 用 toRefs 包裹
console.log(boy_toRefs) // 打印一下结果
return { boy_toRefs }
}
}
</script>코드를 저장하고 페이지를 새로고침하여 확인하세요.
그래서 코드를 수정해 보겠습니다. .property 외에도 렌더링 시 .value도 필요합니다.
<p>姓名：{{boy_toRefs.name.value}}</p>
<p>年龄：{{boy_toRefs.age.value}}</p>뷰 레이어 코드를 수정하고 효과를 확인해보세요.
이봐, 이제 정상이야!
이게 점점 더 복잡해지고 있지 않나요? 원래는 속성만 클릭하면 되었는데 이제는 속성과 값을 클릭해야 하는거 아닌가요? 바지를 벗고 P를 입는건 불필요한거 아닌가요? 이봐 이봐! 나도 그렇게 생각해.
이전 블로그 게시물에서 언급했듯이 리액티브 기능을 사용하면 이런 복잡한 구조 데이터를 최대 한 번만 클릭하면 렌더링이 가능하기 때문에 불필요하다고 말하는 것이 정상입니다. toRefs 함수를 두 번 클릭해야 합니다.
<template>
<div>
<h2>toRef toRefs 函数</h2>
<p>姓名：{{boy_toRefs.name}}</p>
<p>年龄：{{boy_toRefs.age}}</p>
</div>
</template>
<script>
import { toRefs, reactive } from 'vue'
export default {
setup() {
const boy = {
name: '我是????????.',
age: 10
}
const boy_toRefs = reactive(boy)
return { boy_toRefs }
}
}
</script>我们不使用 toRefs 函数，而是用之前说的 reactive 函数处理数据。
我们可以看到，页面是可以正常解析的，那为什么我们还有舍近求远的使用 toRefs 函数呢？
其实是有原因的呀！
其实 toRefs 函数最大的用处在这里！
我们这个 boy 对象里面只有两个参数比较少，如果我们这个对象里面有十个参数或者是更多的话，每次展示的时候都得写那么多遍的 boy 点，是不是很麻烦呢？所以说使用 toRefs 函数就可以解决这个问题，看下面的代码。
<template>
<div>
<h2>toRef toRefs 函数</h2>
<p>姓名：{{name}}</p>
<p>年龄：{{age}}</p>
</div>
</template>
<script>
import { toRefs } from 'vue'
export default {
setup() {
const boy = {
name: '我是????????.',
age: 10
}
return { boy_toRefs , ...toRefs(boy)}
}
}
</script>在 return 抛出 reactive 的时候，使用扩展运算符和 toRefs 函数，就可以实现直接写属性的方式展示数据了。
但是呢，深层次的对象依旧需要通过点来实现。
也许你还有疑问，直接扩展运算 reactive 函数也行啊，为啥要套上 toRefs 函数，记住一点呀！
toRefs 函数修改，原始数据被改变，页面不会被触发。
看下面代码：
<template>
<div>
<h2>toRef toRefs 函数</h2>
<p>姓名：{{name}}</p>
<p>年龄：{{age}}</p>
<el-button type="primary" @click="btn">修改 name</el-button>
</div>
</template>
<script>
import { toRefs, reactive } from 'vue'
export default {
setup() {
const boy = {
name: '我是????????.',
age: 10
}
const new_toRefs = toRefs(boy)
const btn = () => {
new_toRefs.name.value = '????????.'
console.log(boy)
}
return { btn, ...toRefs(boy) }
}
}
</script>打印一下结果：
从打印结果中可以看出，原始数据被改变，页面没有被触发。根据我的写法，可以发现，从解构或构建 toRefs 返回的对象，都不会对值的响应性产生影响。
위 내용은 Vue3에서 toRef 및 toRefs 함수를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!