标签：判断 console age reactive readonly Vue3 ref objState

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>

标签：判断,console,age,reactive,readonly,Vue3,ref,objState
来源： https://www.cnblogs.com/IwishIcould/p/15034313.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。