vue3.0 Composition API 上手初體驗 神奇的 setup 函數 (二) 響應對象數據的綁定

vue3.0 Composition API 上手初體驗 神奇的 setup 函數 (二) 響應對象數據的綁定

上文中，我們已經瞭解普通響應數據的綁定了。但是，那只是普通數據，我們在實際開發中，用到的對象數據是最多的。這一講，我們就來講講響應對象數據的綁定。

開幹。

編輯 src/views/About.vue 文件

編寫代碼如下：

<template>
  <router-link to="/">點這裏去首頁</router-link>
  <hr>
  <dl>
    <dt>{{state.name}}</dt>
    <dd>性別：{{state.sex}}</dd>
    <dd>地址：{{state.address}}</dd>
  </dl>
  <button @click="addressChange">更新地址</button>
</template>
<script>
// reactive 是 vue 3.0 的一個重大變化，其作用爲創建響應式的對象或數組
import { reactive } from 'vue'
// 導出依然是個對象，不過對象中只有一個 setup 函數
export default {
  setup () {
    // 定義一個 state 的響應式對象數據，並賦值
    const state = reactive({
      name: 'FungLeo',
      sex: 'boy',
      address: '上海'
    })
    console.log(state)
    // 定義一個函數，修改 state 的值。
    const addressChange = () => {
      state.address += '浦東'
    }
    // 導出一些內容給上面的模板區域使用
    return {
      state,
      addressChange
    }
  }
}
</script>

代碼差不多，我們來看下效果：

劃重點

在上一講中，我們使用的是 ref 來綁定響應的值，這裏，我們需要的是 reactive。

reactive 和 ref 的區別就是，reactive 是處理對象或者數組的。

我們在代碼中，使用了 reactive 來處理 state 這個對象。我們來打印一下，可以看到是如下圖的內容。

這裏面的重點是 Proxy 代理。這裏就要說到，vue 3.0 和 vue 2.0 的一個重大區別了，就是採用了 ES2015 的 Proxy 來代替 Object.defineProperty。結果是功能更強大，同時性能更優秀。更多的內容，可以自己找相關的資料來詳細瞭解。

好的，有關普通數據和對象數組數據的響應式綁定就說完了。但是看到這裏，各位看官要問，原來的各種生命週期鉤子哪裏去了？

彆着急，下一講，我們來說道說道。

本文由 FungLeo 原創，允許轉載，但轉載必須保留首發鏈接。

---

《vue3.0 Composition API 上手初體驗》 文章目錄地址： https://blog.csdn.net/fungleo/category_10020552.html 我會不定期的補充一些相關內容，歡迎關注訂閱！

文章代碼倉庫 https://github.com/fengcms/vue3-demo 會用 git 的朋友，可以去直接下載我的代碼。當然，給我點個 star 啥的，也不是不可以的哈！