vue3中toRef和toRefs的情况（系列九）
ref和toRef区别: ref->复制, 修改响应式数据不会影响原始数据 toRef->引用, 修改响应式数据会影响原始数据 ref->数据发生改变, 界面就会自动更新 toRef->数据发生改变, 界面也不会自动更新 toRef应用场景: 如果想让响应式数据和以前的数据关联起来, 并且更新响应式数据之后还不想更新UI, 那么就可以使用toRef
1.toRef 创建一个ref类型数据, 并和以前的数据关联 2.toRefs 批量创建ref类型数据, 并和以前数据关联 3.toRef和ref区别 ref-创建出来的数据和以前无关(复制) toRef-创建出来的数据和以前的有关(引用) ref-数据变化会自动更新界面 toRef-数据变化不会自动更新界面
ref类型数据代码
<template>
<div>
<p>{{state}}</p>
<button @click="myFn">按钮</button>
</div>
</template>
<script>
import {ref} from 'vue';
export default {
name: 'App',
setup() {
let obj = {name:'lnj'};
let state = ref(obj.name);
function myFn() {
state.value = 'zs';
console.log(obj); //{name:'lnj'}
console.log(state); // {name:'zs'}
}
return {state, myFn}
}
}
</script>
<style>
</style>
通过发现，如果利用ref将某一个对象中的属性变成响应式的数据，
我们修改响应式的数据是不会影响到原始数据的obj !== state， 会触发页面更新
通过toRef
<template>
<div>
<p>{{state}}</p>
<button @click="myFn">按钮</button>
</div>
</template>
<script>
/*
1.toRef
创建一个ref类型数据, 并和以前的数据关联
2.toRefs
批量创建ref类型数据, 并和以前数据关联
3.toRef和ref区别
ref-创建出来的数据和以前无关(复制)
toRef-创建出来的数据和以前的有关(引用)
ref-数据变化会自动更新界面
toRef-数据变化不会自动更新界面
* */
import {ref, toRef} from 'vue';
export default {
name: 'App',
setup() {
let obj = {name:'lnj'};
/*
ref(obj.name) -> ref(lnj)
-> reactive({value:lnj})
* */
// ref->复制
// let state = ref(obj.name);
// toRef->引用
/*
ref和toRef区别:
ref->复制, 修改响应式数据不会影响以前的数据
toRef->引用, 修改响应式数据会影响以前的数据
ref->数据发生改变, 界面就会自动更新
toRef->数据发生改变, 界面也不会自动更新
toRef应用场景:
如果想让响应式数据和以前的数据关联起来, 并且更新响应式数据之后还不想更新UI, 那么就可以使用toRef
* */
let state = toRef(obj, 'name');
function myFn() {
state.value = 'zs';
/*
结论: 如果利用ref将某一个对象中的属性变成响应式的数据
我们修改响应式的数据是不会影响到原始数据的obj !== state
* */
/*
结论: 如果利用toRef将某一个对象中的属性变成响应式的数据
我们修改响应式的数据是会影响到原始数据的
但是如果响应式的数据是通过toRef创建的, 那么修改了数据并不会触发UI界面的更新
* */
console.log(obj); //{name:'zs'}
console.log(state); //{name:'zs'}
}
return {state, myFn}
}
}
</script>
<style>
</style>
toRefs
<template>
<div>
<p>{{state}}</p>
<button @click="myFn">按钮</button>
</div>
</template>
<script>
/*
1.toRef
创建一个ref类型数据, 并和以前的数据关联
2.toRefs
批量创建ref类型数据, 并和以前数据关联
3.toRef和ref区别
ref-创建出来的数据和以前无关(复制)
toRef-创建出来的数据和以前的有关(引用)
ref-数据变化会自动更新界面
toRef-数据变化不会自动更新界面
* */
import {ref, toRef, toRefs} from 'vue';
export default {
name: 'App',
setup() {
let obj = {name:'lnj', age:18};
// let name = toRef(obj, 'name');
// let age = toRef(obj, 'age');
let state = toRefs(obj);
function myFn() {
// name.value = 'zs';
// age.value = 666;
state.name.value = 'zs';
state.age.value = 666;
console.log(obj); //{name:'zs', age:666}
console.log(state); //{name:'zs', age:666}
// console.log(name);
// console.log(age);
}
return {state, myFn}
}
}
</script>
<style>
</style>
