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,}
</script>

01.gif

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>

相关文章

https://segmentfault.com/a/1190000022018995 https://www....
ES6 (ECMAScript 6)中的模块是一个包含 JavaScript 代码的...
from https://mp.weixin.qq.com/s/-rc1lYYlsfx-wR4mQmIIQQ V...
D:\Temp&gt;npm init vite@latest vue3study --temp...
文章浏览阅读1.2k次。最近自己从零撸起的甘特图组件需要子组...
文章浏览阅读3.3k次,点赞3次,收藏16次。静默打印是什么?简...