Reactive判断的API

Reactive判断API

      • [1. isProxy](#1. isProxy)
      • [2. isReactive](#2. isReactive)
      • [3. isReadonly](#3. isReadonly)
      • [4. toRaw](#4. toRaw)
      • [5. shallowReactive](#5. shallowReactive)
      • [6. shallowReadonly](#6. shallowReadonly)

1. isProxy

复制代码
    检查对象是否是由reactive或readonly创建的proxy.
javascript 复制代码
  	const info1 = reactive({
      name:'why',
       age:18
     })
	 const info2 = readonly(reactive({
      name:'why',
       age:18
     }))
    console.log(isProxy(info1),isProxy(info2));//true true

2. isReactive

复制代码
     检查对象是否由reactive创建的响应式代理:
     如果该代理是readonly创建的,但包裹了由reactive创建的另一个代理,它也会返回true
javascript 复制代码
  	const info1 = reactive({
      name:'why',
       age:18
     })
	 const info2 = readonly(reactive({
      name:'why',
       age:18
     }))
    console.log(isReactive(info1),isReactive(info2));//true true

3. isReadonly

复制代码
      检查对象是否由readonly创建的只读代理。
javascript 复制代码
  	const info1 = readonly({
      name:'why',
       age:18
     })
	 const info2 = readonly(reactive({
      name:'why',
       age:18
     }))
    console.log(isReadonly(info1),isReadonly(info2));//true true

4. toRaw

复制代码
      返回reactive或readonly代理的原始对象(不建议保留对原始对象的持久引用。谨慎使用(转成原始对象之后是要修改原始对象不推荐))
javascript 复制代码
      const info1 = readonly({
        name:'why',
        age:18
      })
      const info2 = reactive({
        name:'why',
        age:18
      })
     
      console.log(toRaw(info1),toRaw(info2)); //{name: 'why', age: 18} {name: 'why', age: 18}

5. shallowReactive

复制代码
      创建一个响应式代理,它跟踪其自身property的响应性,但不执行嵌套对象深层响应式转换(深层还是原生对象)
      注意点:修改后视图不刷新。修改carName的时候,不能把其他响应式数据也放到里面,不然会带着一起修改视图
javascript 复制代码
		<template>
		  <div>
		   <h2>
		    {{ info.car.name }} //视图不更新
		   </h2>
		   <button @click="chagneCarName">修改carName</button>
		  </div>
		</template>
		
      const info = shallowReactive({
        name:'why',
        age:18,
        car:{
          name:'xx'
        }
      })

      const chagneCarName = () => {
        info.car.name = 'yy'
      }

6. shallowReadonly

复制代码
      创建一个proxy,使其自身的property为只读,但不执行嵌套对象的深度只读转换(深层还是可读、可写)
javascript 复制代码
      const user = shallowReadonly({
        name: 'Alice',
        address: {
          street: '123 Main St',
          city: 'Wonderland',
        }
      })
    
       const changName = () => {
        user.name = '456 Elm St'; // 视图不会更新
      }
相关推荐
秃顶老男孩.22 分钟前
异步处理(前端面试)
前端·面试·职场和发展
三脚猫的喵38 分钟前
微信小程序中实现AI对话、生成3D图像并使用xr-frame演示
前端·javascript·ai作画·微信小程序
文心快码BaiduComate43 分钟前
文心快码3.5S全新升级,体验多智能体协同开发,最高赢无人机!
前端·后端·程序员
安卓开发者1 小时前
鸿蒙Next ArkWeb进程解析:多进程架构如何提升Web体验
前端·架构·harmonyos
炒毛豆1 小时前
移动端响应式px转换插件PostCSS的使用~
前端·javascript·postcss
羊羊小栈1 小时前
基于「YOLO目标检测 + 多模态AI分析」的PCB缺陷检测分析系统(vue+flask+数据集+模型训练)
vue.js·人工智能·yolo·目标检测·flask·毕业设计·大作业
恋猫de小郭1 小时前
Flutter Riverpod 3.0 发布,大规模重构下的全新状态管理框架
android·前端·flutter
wordbaby1 小时前
用 window.matchMedia 实现高级响应式开发:API 全面解析与实战技巧
前端·javascript
薄雾晚晴1 小时前
Rspack 实战,构建流程升级:自动版本管理 + 命令行美化 + dist 压缩,一键输出生产包
前端·javascript
huabuyu1 小时前
在 Taro 小程序中实现完整 Markdown 渲染器的实践
前端