1、ref是复制,视图会更新
如果利用ref将某一个对象中的某一个属性值变成响应式数据
我们修改响应式数据是不会影响原始数据的;
同时视图会更新。
ref就是复制 复制是不会影响原始数据的
<template>
<div>
<div>
<div>{{stateObj}}</div>
<button @click="func1">按钮</button>
</div>
</div>
</template>
<script>
import {ref} from 'vue'
export default {
name: 'App',
setup(){
let obj={name:"张三",age:22}
//将对象中的某一个属性变成响应式数据
let stateObj=ref(obj.name)
function func1(){
stateObj.value="张三变成李四";
//原始数据没有发生改变 原始数据obj {name: "张三", age: 22}
console.log("原始数据obj",obj)
//响应式数据发生改变了
/**
响应式stateObj如下:
RefImpl {_shallow: false, dep: Set(1), __v_isRef: true, _rawValue: "张三变成李四", _value: "张三变成李四"}
dep: Set(1) {ReactiveEffect}
__v_isRef: true
_rawValue: "张三变成李四"
_shallow: false
_value: "张三变成李四"
value: "张三变成李四"
__proto__: Object
**/
//变成了一个ref的对象
console.log("响应式stateObj",stateObj)
}
return {stateObj,func1}
},
}
</script>
2、toRef是引用,视图不更新
如果利用toRef将某一个对象中的属性变成了响应式的数据
我们修改响应式的数据是会影响原始数据的
如果数据是通过toRef创建的,修改值后,数据不会触发视图
toRef是引用;它引用的是以前那个对象中的属性
所以你修改后,会影响到原始数据终中的值
<template>
<div>
<div>
<div>{{state}}</div>
<button @click="func1">按钮</button>
</div>
</div>
</template>
<script>
import {toRef} from 'vue'
export default {
name: 'App',
setup(){
let obj={name:"张三",age:22}
//将对象中的某一个属性name变成响应式数据
let state=toRef(obj, 'name');
function func1(){
state.value="我是李四";
console.log('obj',obj) //{name: "我是李四", age: 22}
console.log('state',state)
//state输出如下
ObjectRefImpl {_object: {…}, _key: "name", __v_isRef: true}
__v_isRef: true
_key: "name"
_object: {name: "我是李四", age: 22}
value: "我是李四"
__proto__: Object
}
return {state,func1}
},
}
</script>
3、结论
ref复制, 修改响应式数据,不会影响以前的数据,界面会更改。
toRef引用, 修改响应式的数据,会影响以前的数据,界面不会更新。
总结:
ref和toRef的区别
(1). ref本质是拷贝,修改响应式数据不会影响原始数据;toRef的本质是引用关系,修改响应式数据会影响原始数据
(2). ref数据发生改变,界面会自动更新;toRef当数据发生改变是,界面不会自动更新
(3). toRef传参与ref不同;toRef接收两个参数,第一个参数是哪个对象,第二个参数是对象的哪个属性