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

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>