站長資訊網
相對于Vue2的defineProperty實現的數據響應式，Vue3對數據響應的處理分工更加明確，通過組合式api中ref與reactive兩個暴露給開發者的函數對數據進行包裝，從而實現了數據響應式，那么它們有什么區別？下面我們一起來根據例子來學習！
ref：定義基本數據類型、引用數據類型的響應式。也就是說ref(value)，這個value類型可以是基本數據類型，也可以是引用數據類型，但是在js中使用時必須以屬性.value格式使用，在template中可以直接調用數據。
<template> <div> <div><button @click="changeValue">修改</button></div> <div> <p>當前strRef：{{ strRef }}</p> <p>當前objRef：姓名：{{ objRef.name }} 愛好：{{ objRef.hobboy }}</p> <p>當前arrRef：{{ arrRef }}</p> </div> </div> </template> <script> import { defineComponent, ref, shallowRef } from 'vue' export default defineComponent({ setup () { const strRef = ref('sapper');// 基本數據類型 const arrRef = ref([1, 3, 2]);// 數組類型 const objRef = ref({ // 對象類型 name: 'sapper', hobboy: ['吉他', '原神'] }) const changeValue = () => { strRef.value = '工兵'; arrRef.value[1] = 4; objRef.value.hobboy[1] = '滑冰'; } return {strRef,objRef,arrRef,changeValue} } }) </script>
登錄后復制
reactive：定義引用類型數據的響應式，不支持基本數據類型，如果需要寫基本數據類型只能是放在對象中，也就是說reactive(value)，這個value類型必須是引用類型。【
