vue中toRef理解

toRef方法与ref方法一样都是用来创建响应性数据的.
ref与toRef的区别:

• ref：是复制，修改响应式数据不会影响以前的数据,数据发生变化，界面就会自动更新。
• toRef：是引用，修改响应式数据会影响以前的数据,数据发生变化，界面就会不会更新。

应用场景

• 如果想让响应式数据和以前的数据关联起来，并且更新响应式数据之后还不想更新UI，那么就可以使用toRef

<template>
  <div>
    <div>{
    
    {
    
     state }}</div>
    <button @click="handelClick">按钮</button>
  </div>
</template>

<script>
import {
    
     ref, toRef } from "vue";
export default {
    
    
  setup() {
    
    
    let obj = {
    
     name: "lin" };//原始数据
    // let state = ref(obj.name);//代理数据
    let state = toRef(obj,'name');
    // console.log(state);

    function handelClick() {
    
    
      state.value = "mu";
      console.log(obj);//原始数据
      console.log(state);//代理数据
    }
    return {
    
     state, handelClick };
  },
};
</script>

效果

ref：

toRef：