技術標籤：前端vue前端javascriptvue.js

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：