前言

為了讓vue3中的數據變成響應式，需要使用ref,reactive函數

ref函數使用方式

• 導入ref函數

  import {ref} from 'vue'
  

• 在setup函數中，將需要響應式的數據通過ref函數進行包裝，修改響應式數據時，需要通過:
  ref包裝的響應式對象.value = 修改后的數據這種形式進行修改

  export default {name: 'App',components: {......},setup(){//數據定義let name = ref('張三')let age = ref(18)let job = ref({type:'前端工程師',salary:'30k'})//定義函數function changeInfo(){name.value = '李四'age.value += 1job.value.type = '后端工程師'job.value.salary = '50k'/*console.log(name,age)*/}//setup必須有返回值,將上述定義的響應式數據，以及函數進行返回return {name,age,job,changeInfo}}
  }
  

reactive函數使用方式

• 導入reactive函數

  import {reactive} from 'vue'
  

• reactive函數用于處理對象類型以及數組類型的響應式數據（ref處理對象類型的數據也借助了reactive的幫助）,并且處理后返回的對象不需要使用.value后綴,用法模板為:
  const 代理對象 = reactive(源對象),該代理對象實質上是Proxy的實例對象

  export default {name: 'App',components: {},setup(){//數據定義/*為了方便起見，可以將之前定義的數據整合到一個對象中，這樣即方便管理，也可以統一由reactive函數處理*/let person = reactive({name : '李四',age:18,job:{type:'前端工程師',salary:'60k'},hobbies:['抽煙','喝酒','燙頭']})//定義函數function changeInfo(){person.name = '王五'person.age+=1person.job.type='后端工程師'person.job.salary='50k'person.hobbies[0] = '學習'}//setup必須有返回值return {person,changeInfo}}
  }
  

reactive對比ref總結

• 從定義數據角度對比：
  ref用來定義：基本類型數據
  reactive用來定義：對象或數組類型數據
  備注：ref也可以用來定義對象或數組類型數據，它內部會通過reactive轉為代理對象
• 從原理角度對比：
  ref通過Object.defineProperty()的get()與set()來實現響應式（數據劫持）
  reactive通過Proxy來實現響應式（數據劫持），并通過Reflect操作源對象內部數據
• 從使用角度對比：
  ref定義的數據：操作數據需要附帶.value，讀取數據時，從模板中直接讀取，不需要.value
reactive定義的數據：操作數據與讀取數據均不需要.value