Vue3類型判斷和ref的兩個作用

1.類型判斷的四種方法

isRef: 檢查一個值是否為一個ref對象
isReactive:檢查一個對象是否是由 reactive 創建的響應式代理
isReadonly: 檢查一個對象是否是由 readonly 創建的只讀代理
isProxy: 檢查個對象是否是由 reactive 或者  readonly 方法創建的代理

<template>
 <div>
    <div>
      <div>age:{{age}}</div>
       <button @click="func1">按鈕</button>
    </div>
 </div>
</template>
<script>
import {ref,isRef,reactive,
        isReactive,readonly,
        isReadonly, isProxy
        } from 'vue'
export default {
  name: 'App',
  setup(){
    let age=ref(10);
    function func1(){

      // isRef: 檢查一個值是否為一個ref對象
      console.log(isRef(age));//true

      // isReactive:檢查一個對象是否是由 reactive 創建的響應式代理
      console.log(isReactive(reactive({age:10,name:'張三'})));//true

      // 檢查一個對象是否是由 readonly 創建的只讀代理
      console.log(isReadonly(readonly({})));//true

      // 檢查個對象是否是由 reactive 或者  readonly 方法創建的代理
      console.log(isProxy(reactive({})));//true
      console.log(isProxy(readonly({})));//true

    }
    return {age,func1}
},
}
</script>

2 ref監聽數據的變化

使用ref函數，
去使用監聽某一個變量的變化，
並且把它渲染到視圖上.視圖發生變化

<template>
 <div>
    <div>
      <div>objState:{{objState}}</div>
       <button @click="func1">按鈕</button>
    </div>
 </div>
</template>
<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup(){
    let objState=ref({
      name:'張三',
      age:10
    });
   
    function func1(){
      objState.value.name='變成李四';
      objState.value.age=14
      console.log(objState)
    }
    return {objState,func1}
},
}
</script>

3. ref獲取頁面中的元素

<template>
  <div>
    <h2>input框自動聚焦</h2>
    <input ref="htmlinput" type="text" />
  </div>
</template>
<script>
import { ref,onMounted } from "vue";
export default {
  name: "App",
  setup() {
    let htmlinput=ref();
    
    //頁面渲染完成
    onMounted(() => {
  
      <!-- if(htmlinput.value){
        // 獲取input元素
        console.log( htmlinput.value  )
        // 讓input自動去聚焦
        htmlinput.value.focus();
      } -->

      htmlinput.value&& htmlinput.value.focus();
      
    })
    return {htmlinput}
  },
};
</script>