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>

Vue3类型判断和ref的两个作用的更多相关文章

  1. 认真总结Vue3中ref与reactive区别和isRef与isReactive 类型判断

    1.什么是ref? 1.ref和reactive-样 也是用来实现响应式数据的方法 由于reactive必须传递一个对象, 所以导致在企业开发中如果我们只想让某个变量实现响应式的时候会非常麻烦 所以V ...

  2. C#与Java对比学习:类型判断、类与接口继承、代码规范与编码习惯、常量定义

    类型判断符号: C#:object a;  if(a is int) { }  用 is 符号判断 Java:object a; if(a instanceof Integer) { } 用 inst ...

  3. 17.C#类型判断和重载决策(九章9.4)

    今天来结束第九章,聊下我们经常忽略,但是编译器会帮我们完成的"类型判断和重载决策",理解编译器如何帮我们完成,相信在写代码时会更明确,避免一些编译出错,排查的问题,让我们开发更给力 ...

  4. [改善Java代码]在equals中使用getClass进行类型判断

    建议47: 在equals中使用getClass进行类型判断 本节我们继续讨论覆写equals的问题.这次我们编写一个员工Employee类继承Person类,这很正常,员工也是人嘛,而且在JEE中J ...

  5. JavaScript 类型判断 —— typeof 以及 instanceof 中的陷阱

    JavaScript中基本类型包含Undefined.Null.Boolean.Number.String以及Object引用类型.基本类型可以通过typeof来进行检测,对象类型可以通过instan ...

  6. YUI的类型判断函数

    1.首先定义一个关于类型的对象,及相关变量 类型判断对象 ar L = Y.Lang || (Y.Lang = {}), STRING_PROTO = String.prototype, TOSTRI ...

  7. 类型和原生函数及类型转换(二:终结js类型判断)

    typeof instanceof isArray() Object.prototype.toString.call() DOM对象与DOM集合对象的类型判断 一.typeof typeof是一个一元 ...

  8. JavaScript类型判断详解(Object.prototype.toString.call()方法进行数据类型的可靠判断)

    前言 在编写一些类库中,我们经常需要判断一些未知的用户的输入和配置,故而需要进行一系列的类型判断.故而总结下JS是如何进行类型判断的 typeof typeof操作符返回一个字符串,表示未经计算的操作 ...

  9. JS 相等判断 / 类型判断

    相等判断 JavaScript提供三种不同的值比较操作: 严格相等 ("triple equals" 或 "identity"),使用 === , 宽松相等 ( ...

  10. python3.4学习笔记(二) 类型判断,异常处理,终止程序

    python3.4学习笔记(二) 类型判断,异常处理,终止程序,实例代码: #idle中按F5可以运行代码 #引入外部模块 import xxx #random模块,randint(开始数,结束数) ...

随机推荐

  1. 1ms的时延,10Gbps速率…5G通信技术解读

    摘要:5G通信的关键技术有哪些呢?5G对于移动互联网场景和物联网场景又带来了哪些新的技术和变革? 本文分享自华为云社区<5G通信关键技术解读>,作者:Super.雯 . 5G作为目前最新一 ...

  2. 宝藏昇腾AI应用推荐!CANN带你体验黑白图像自动上色的快乐~

    摘要:属于"你"那边的麦田 天空 河水 骏马 树木--会是什么颜色呢? 黑白与色彩 似乎把时代分割了两半~ 我在这头看见了错乱繁华,琳琅满目,看见快速消长的色彩缤纷. 翻开一张黑白 ...

  3. vue2升级vue3:TypeScript下vuex-module-decorators/vuex-class to vuex4.x

    因为vue2 下  vue-property-decorator + vue-tsx-support +vuex-module-decorators/vuex-class ,class compone ...

  4. 字节跳动基于Doris的湖仓分析探索实践

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 Doris简介 Doris是一种MPP架构的分析型数据库,主要面向多维分析,数据报表,用户画像分析等场景.自带分析 ...

  5. Linux 升级安装 Python 3

    百度飞桨 PaddlePaddle 2.4.0 => Python 3.7.4 PaddlePaddle 2.4.1+ => Python 3.9.0 下载 # 安装依赖 [root@lo ...

  6. PPT 动态迷幻图谱

    迷幻动画的本质拆解 插件: islide + 软件: PowerPoint https://www.islide.cc/ 圆型 画一个正圆,无填充色,边框 2.25磅 左边红色.右边黄色.中间两个透明 ...

  7. Intellij IDEA 集成 Docker 发布

    1. Docker开启远程访问,注意端口不要用默认的,防止被攻击 [root@localhost ~]# vi /usr/lib/systemd/system/docker.service 修改 # ...

  8. 初识QT、窗口以及信号槽

    1 基本规范: 无论是写什么样的代码,第一步都应该是创建一个程序对象 #include <QApplication> int main(int argc, char *argv[]) { ...

  9. 如何写个死循环,既不独占线程,又不阻塞UI线程?

    如果死循环独占线程,500个死循环要占用500个线程,如果死循环不独占线程,500个死循环,用200个线程也行,用20个线程也行,无非是执行的慢点 这样可以把同步操作改写为异步,并且节省线程占用 问个 ...

  10. UVA - 10391:Compound Words (字符串水题)

    题目大意 给定若干单词,按字典序输出由两个单词拼接而成的单词 思路分析 用set存储所有单词,枚举每个单词word,遍历word的所有左右子串组合情况,若左右子串均在set中,说明符合题意.时间复杂度 ...