認真總結Vue3中ref與reactive區別和isRef與isReactive 型別判斷

明月人倚樓發表於2021-06-11
VueReact型別

1.什麼是ref?

1.ref和reactive-樣
也是用來實現響應式資料的方法
由於reactive必須傳遞一個物件，
所以導致在企業開發中如果我們只想讓某個變數實現響應式的時候會非常麻煩
所以Vue3就給我們提供了ref方法，實現對簡單值的監聽

2.ref本質:
ref底層的本質其實還是reactive
系統會自動根據我們給ref傳入的值將它轉換成
ref(xx) -> reactive({value:xx})

3.ref注意點:
在Vue的html中使用ref的值不用通過value獲取
在JS中使用ref的值必須通過value獲取

2.在Vue的html中使用ref的值不用通過value獲取

<template>
 <div>
    <div>
      <!--在Vue的html中使用ref的值不用通過value獲取  -->
      <li>{{state}}</li>
      <button @click="func1">按鈕</button>
    </div>
 </div>
</template>
<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup(){
     let state=ref(100);
     function func1(){
        <!-- 在JS中使用ref的值必須通過value獲取 -->
       state.value=200
     }
     return {state ,func1}
  },
}
</script>

3. ref和reactive區別:

區別一：
如果在template裡使用的是ref型別的資料，那麼Vue會自動幫我們新增.value
如果在template裡使用的是reactive型別的資料，那麼Vue不會自動幫我們新增.value

區別二：
ref函式只能夠去監聽簡單型別的資料變化，不能夠去監聽，複雜型別的變化(陣列、物件)
reactive函式傳遞的引數必須是物件(json/arr)

區別三
__v_isRef 是ref中擁有的屬性
Vue底層就是根據這個來進判斷是否需要在template新增.value的哈
reactive 是沒有__v_isRef這個屬性的，所以不會幫我們新增.value的

4.ref型別中有__v_isRef 這個屬性

<template>
 <div>
    <div>
      <li>{{state}}</li>
       <button @click="func1">按鈕</button>
    </div>
 </div>
</template>
<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup(){
     let state=ref(100)
     function func1(){
       console.log( 'stateObj下的屬性',state );// 有 __v_isRef 這個屬性
       state.value=200;
     }
     return {state,func1}
  },
}
</script>

5. isRef,isReactive 型別判斷

isRef是用來檢測ref型別的，如果是返回的是true,否者返回false
isReactive是用來檢測reactive型別的，如果是返回的是true,否者返回false

<template>
 <div>
    <div>
      <li>{{state}}</li>
       <button @click="func1">按鈕</button>
    </div>
 </div>
</template>
<script>
import {ref} from 'vue'
// 引入，你也可以在上一句中直接匯入
import {isRef,isReactive} from 'vue'
export default {
  name: 'App',
  setup(){
     let state=ref(100)
     function func1(){
       //是否是ref型別的
       console.log(isRef(state));//true

       //是否是reactive型別的
       console.log(isReactive(state));//false
       state.value=200;
     }
     return {state,func1}
  },
}
</script>

相關文章