VUE框架Vue3使用API进行响应式数据判断的解析------VUE框架

旧约Alatus

已于 2023-12-28 13:03:49 修改

阅读量444

点赞数 7

分类专栏： # VUE框架前端文章标签： javascript 前端 vue.js 前端框架 ecmascript vue js

于 2023-12-27 16:03:37 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/135248651

版权

前端同时被 2 个专栏收录

332 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

<template>
  
</template>

<script>
import { reactive,isRef,ref,isProxy,isReactive, readonly, isReadonly } from 'vue';
export default {
    name : "App",
    setup(){
        // 定义很多个变量
        // 这些变量那些是具有响应式,哪些是没有响应式的
        let a = 1;
        let b = ref(2);
        let c = reactive({name:"Jack",age:20});
        // 甚至这个变量可能是别的组件传递过来的,怎么判断是否是响应式的
        // isref判断是否是ref的
        // isReactive判断是否是reactive或者shallowReactive
        // isProxy判断一个对象是否是reactive或者readonly,shallowReactive,shallowReadonly
        // isReadyonly检查传入的值是否为只读对象
        console.log(isRef(a));
        // 判断是否为ref
        console.log(isRef(b));
        // 判断是否为reactive或者reactive
        console.log(isReactive(c));
        // ref就是false
        console.log(isReactive(b));
        // isProxy不将ref视为代理对象
        console.log(isProxy(b));
        c = readonly(c);
        console.log(isReadonly(c));
        // 用isProxy判断只读也是true
    }
}
</script>

<style>

</style>
<template>

</template>

<script>

import { reactive,isRef,ref,isProxy,isReactive, readonly, isReadonly } from 'vue';

export default {

name : "App",

setup(){

// 定义很多个变量

// 这些变量那些是具有响应式,哪些是没有响应式的

let a = 1;

let b = ref(2);

let c = reactive({name:"Jack",age:20});

// 甚至这个变量可能是别的组件传递过来的,怎么判断是否是响应式的

// isref判断是否是ref的

// isReactive判断是否是reactive或者shallowReactive

// isProxy判断一个对象是否是reactive或者readonly,shallowReactive,shallowReadonly

// isReadyonly检查传入的值是否为只读对象

console.log(isRef(a));

// 判断是否为ref

console.log(isRef(b));

// 判断是否为reactive或者reactive

console.log(isReactive(c));

// ref就是false

console.log(isReactive(b));

// isProxy不将ref视为代理对象

console.log(isProxy(b));

c = readonly(c);

console.log(isReadonly(c));

// 用isProxy判断只读也是true

}

}

</script>

<style>

</style>