Vue3中ref与toRef的区别浅析

 更新时间:2021年06月23日 09:07:10   作者:我的div丢了肿么办  
我们知道ref可以用于创建一个响应式数据,而toRef也可以创建一个响应式数据,这篇文章主要给大家介绍了关于Vue3中ref与toRef区别的相关资料,需要的朋友可以参考下

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 {
          _rawValue: "张三变成李四", _shallow: false,
          __v_isRef: true, _value: "张三变成李四"
      }
      **/
      //变成了一个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');
    console.log('toRef',state)
    function func1(){
      state.value="我是李四";
      console.log('obj',obj)
      console.log('state',state)
    }
    return {state,func1}
  },
}
</script>

3.结论

ref复制, 修改响应式数据,不会影响以前的数据,界面会更改。

toRef引用, 修改响应式的数据,会影响以前的数据,界面不会更新。

toRef的使用场景

如果想让响应式数据和原始数据关联起来。

并且更新响应式数据后,不想视图更新;那么就可以使用toRef

小结:

ref和toRef的区别

(1). ref本质是拷贝,修改响应式数据不会影响原始数据;toRef的本质是引用关系,修改响应式数据会影响原始数据

(2). ref数据发生改变,界面会自动更新;toRef当数据发生改变是,界面不会自动更新

(3). toRef传参与ref不同;toRef接收两个参数,第一个参数是哪个对象,第二个参数是对象的哪个属性

总结

到此这篇关于Vue3中ref与toRef区别的文章就介绍到这了,更多相关Vue3 ref与toRef区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue微信项目按需授权登录策略实践思路详解

    Vue微信项目按需授权登录策略实践思路详解

    这篇文章主要介绍了Vue微信项目按需授权登录策略实践思路详解,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • Vue实现Google第三方登录的示例代码

    Vue实现Google第三方登录的示例代码

    本文记录作者在vue项目中使用到Google第三方登录,查询到的资料文档也不详细,故此把自己所遇到的坑及问题详细的记录下来。
    2021-07-07
  • 详解vue-cli项目在IE浏览器打开报错解决方法

    详解vue-cli项目在IE浏览器打开报错解决方法

    这篇文章主要介绍了详解vue-cli项目在IE浏览器打开报错解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • vue实现多栏布局拖拽

    vue实现多栏布局拖拽

    这篇文章主要为大家详细介绍了vue实现多栏布局拖拽,改变盒子的宽度,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue 设置路由的登录权限的方法

    vue 设置路由的登录权限的方法

    这篇文章主要介绍了vue 设置路由的登录权限的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • vue3 setup点击跳转页面的实现示例

    vue3 setup点击跳转页面的实现示例

    本文主要介绍了vue3 setup点击跳转页面的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-10-10
  • Vue3 Element Plus el-form表单组件示例详解

    Vue3 Element Plus el-form表单组件示例详解

    这篇文章主要介绍了Vue3 Element Plus el-form表单组件,Element Plus 是 ElementUI 的升级版,提供了更多的表单控件和功能,同时还改进了一些细节和样式,本文结合示例代码给大家详细讲解,需要的朋友可以参考下
    2023-04-04
  • Vue Element-UI中el-table实现单选的示例代码

    Vue Element-UI中el-table实现单选的示例代码

    在element-ui中是为我们准备好了可直接使用的单选与多选属性的,本文主要介绍了Vue Element-UI中el-table实现单选的示例代码,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • Vue监听使用方法和过滤器实现

    Vue监听使用方法和过滤器实现

    这篇文章主要介绍了Vue监听使用方法和过滤器实现,过滤器为页面中数据进行强化,具有局部过滤器和全局过滤器
    2022-06-06
  • 基于vue2.0动态组件及render详解

    基于vue2.0动态组件及render详解

    下面小编就为大家分享一篇基于vue2.0动态组件及render详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03

最新评论