纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

Vue3 ref与toRef区别 Vue3中ref与toRef的区别浅析

我的div丢了肿么办   2021-06-23 我要评论
想了解Vue3中ref与toRef的区别浅析的相关内容吗,我的div丢了肿么办在本文为您仔细讲解Vue3 ref与toRef区别的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue3,ref与toref,vue中ref的用法,vue中ref使用,下面大家一起来学习吧。

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接收两个参数,第一个参数是哪个对象,第二个参数是对象的哪个属性

总结


相关文章

猜您喜欢

  • OpenCV直线检测并消除 OpenCV实现直线检测并消除

    想了解OpenCV实现直线检测并消除的相关内容吗,Leonwenbin在本文为您仔细讲解OpenCV直线检测并消除的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:OpenCV直线检测,OpenCV直线消除,OpenCV检测消除,下面大家一起来学习吧。..
  • springBoot访问静态资源 springBoot快速访问工程目录下的静态资源

    想了解springBoot快速访问工程目录下的静态资源的相关内容吗,Dkwestworld在本文为您仔细讲解springBoot访问静态资源的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:springBoot访问静态资源,springBoot目录静态资源,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.thecraft.com.cn 【精灵下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式