Vue中ref与toRef有何区别？怎样使用好？

发布时间：2022-02-25 13:40:52 所属栏目：语言来源：互联网

导读：这篇文章给大家介绍的是Vue中ref与toRef的区别，ref与toRef还是有一定的不同的，大家在使用时要注意，下文有详细的介绍，希望大家阅读完这篇能有收获，接下来一起跟随小编看看吧。 1. ref是复制,视图会更新如果利用ref将某一个对象中的某一个属性值变成响应

这篇文章给大家介绍的是Vue中ref与toRef的区别，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接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性.

（编辑：鹤壁站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!