您好,登录后才能下订单哦!
本篇内容主要讲解“Vue3中ref与toRef的区别是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue3中ref与toRef的区别是什么”吧!
如果利用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 { _rawValue: "张三变成李四", _shallow: false, __v_isRef: true, _value: "张三变成李四" } **/ //变成了一个ref的对象 console.log("响应式stateObj",stateObj) } return {stateObj,func1} }, } </script>
如果利用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'); console.log('toRef',state) function func1(){ state.value="我是李四"; console.log('obj',obj) console.log('state',state) } return {state,func1} }, } </script>
ref复制, 修改响应式数据,不会影响以前的数据,界面会更改。
toRef引用, 修改响应式的数据,会影响以前的数据,界面不会更新。
toRef的使用场景
如果想让响应式数据和原始数据关联起来。
并且更新响应式数据后,不想视图更新;那么就可以使用toRef
ref和toRef的区别
(1). ref本质是拷贝,修改响应式数据不会影响原始数据;toRef的本质是引用关系,修改响应式数据会影响原始数据
(2). ref数据发生改变,界面会自动更新;toRef当数据发生改变是,界面不会自动更新
(3). toRef传参与ref不同;toRef接收两个参数,第一个参数是哪个对象,第二个参数是对象的哪个属性
到此,相信大家对“Vue3中ref与toRef的区别是什么”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。