傑森前端

個人理解

在vue3.0中我們可以在setup中return出變數在模板語法中使用。

<script>
export default {
  setup(props, context) {
    const name = 'jason'
    return {
      name
    }
  }
}
</script>

<template>
  {{name}}
</template>

但是單純的這樣使用如果變數裡面資料改變是不會有雙向綁定的效果，這個時候就要用到ref與reactive拉。

在vue3.0中我們需要使用到的東西都要額外引入近來。

經由ref包裝過後的一般數據類型要修改都要使用.value去修改。

不過呢經由ref包裝過的複雜數據類型（陣列,物件）的其實底層會轉換成reactive去包裝所以使用的時候只需要.value一次，物件裡面的屬性就不需要使用.value就可以修改了！。

個人理解就是ref裡面塞了物件陣列等等的值使用.value拿出來得其實就是reactive後的東西

<script>
import { ref, reactive } from "vue";
export default {
  setup(props, context) {
    const name = 'jason'
    let count = ref(0)
    let refJob = ref({
      type:'eng'
    })
    const job = reactive({
      type: 'eng',
      a: {
        b: '1'
      }
    })
    function changeValue() {
      // ref包裝的變數
      // 讀取修改都要.value
      // 但是在模板裡面會幫你自動讀取.value
      count.value = count.value + 1
      //  reactive包裝的變數不需要.value
      job.type = 'eng2'
      refJob.value.type = 'eng2' //這裡的type不用再一次.value
      job.a.b = 2
    }
    return {
      name,
      count,
      job
    }
  }
}
</script>

<template>
  {{name}}
  <br />
  {{ count }}
  <br />
  {{ job.type }}
  <br />
  {{ job.a }}
   <button @click="changeValue">changeValue</button>
</template>

總結

ref定義基本數據類型
reactive定義陣列或物件類型
ref也可以定義陣列或物件，只是內部又使用reactive轉換過

ref使用defineProperty實現響應式
reactive使用proxy實現響應式所以深層內容可以跟著改變

ref修改數據需要使用.value 模板中讀取不用
reactive 修改讀取都不需要.value