Vue3类型判断和ref的两个作用
Vue3 类型 作用 判断 两个 ref
2023-09-27 14:22:17 时间
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】Vue3中监视watch和watchEffect使用(图文+代码)
- vue3路由设置和安装elmentUI
- vue3.x keep-alive 写法
- vue2和vue3插件的区别
- 一、trackingjs初体验-颜色捕获 vue3
- Vue3新特性体验--中(Composition API)
- vue3组件基础,组件引用与使用、向子组件传递数据与事件prop、emit
- 【摸鱼神器】一次搞定 vue3的 路由 + 菜单 + tabs
- Vue3实践记录:vuex/pinia数据为proxy对象时如何获取值、Vue3组件的全局注册
- vue3中ref和reactive的区别(系列六)
- vue3组合API注意点(系列三)
- vue3创建项目(系列一)
- Vue3+Lodash:2023年了,我依然在使用Lodash