- ref—>原有数据的复制,修改数据不会影响原数据但UI界面会更新。
- toRef—>原有数据的引用,修改数据影响原数据但UI界面不更新
<template>
<div>{{ name }}{{ age }}</div>
<button @click="change">change</button>
</template>
<script>
import { toRefs, toRef } from 'vue'
export default {
name: 'App',
setup() {
const obj = {
name: 'zs',
age: '22',
}
const name = toRef(obj, 'name')
const age = toRef(obj, 'age')
// 上述两行代码等价于下方注释代码,使用toRefs需要通过state.name.value进行值的修改
// const state = toRefs(obj)
function change() {
name.value='xmz'
age.value='65'
console.log(obj)
}
return {
name,
age,
change,
}
},
}
</script>
- toRefs可以看作toRef的语法糖,toRefs会遍历传入对象的属性。
const name=toRef(obj,'name')
const age=toRef(obj,'age')
通过name.value进行值的修改
等价于
const state=toRefs(obj)
通过state.name.value进行值的修改