vue3 响应式对象的 api 详解

这篇具有很好参考价值的文章主要介绍了vue3 响应式对象的 api 详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue3 响应式对象的 api 详解

Ⅰ. ref、reactive ( 递归监听 )

import {ref,reactive} from 'vue';
setup() {
    const num =  ref(123);
    num.value = 456;
     
    const obj = reactive({num:123});
    obj.value = 456;
}
  • ref 对象 在 html 模板中会 自动添加 value ( ref 对象中__v_isRef:true 进行判断的 )
  • ref 对象 => reactive( { value:0 } ) 底层自动转换为 reactive
  • 最终 基本数据 类型采用 => (Object.defineProperty) ,引用数据 类型采用 => ( proxy 代理 )

Ⅱ. isRef、isReactive ( 判断 )

import {isRef,isReactive} from 'vue';
setup() {
	const num = ref(123)
    console.log(isRef(num))  // => true
}
  • 用于判断是否是 Ref 和 Reactive 创建的响应对象
  • 使用场景较少

Ⅲ. toRef 和 toRefs ( 解构 )

toRef (一个属性)

import { toRef , reactive } from 'vue';
setup() {
	const obj = reactive({ width:10, height:20 })
    const width = toRef(obj,'width')
	
	return {
		width
	}
}
  • 将一个响应对象的属性,当作 响应对象 单独拿出来 。

toRefs ( 所有 )

import { toRefs , reactive } from 'vue';
setup() {
	const obj = reactive({ width:10, height:20 })
    const { width, height }= toRefs(obj)
	
	return {
		width, height
	}
}
  • 将多个或所有属性,拿出来 且还是响应对象,
  • 一般在返回的时候一次性全部导出 👇
import { toRefs , reactive } from 'vue';
setup() {
	const obj = reactive({ width:10, height:20 })
	
	return {
		...toRefs(obj)
	}
}

Ⅳ. toRaw 、 markRaw ( 解除代理)

toRaw ( 不影响本身 )

import {toRaw} from 'vue';
setup(){
    const num1 =  ref(123)
    const num2 = toRaw(num1)
    console.log(num2 === 123)  //=>true
}
  • 不影响原数据 ,相当于拷贝当前的值
  • 拷贝的值,不在是响应式对象

markRaw ( 添加 非响应对象 属性 )

import { markRaw, reactive } from "vue";
setup(){
	const obj = reactive({ num:1 }); //让数据无法被追踪
	      obj.noUpdate = markRaw({num:1});

	function add() {
  		obj.num++;      // 页面数据 会更新
  	
  		obj.noUpdate.num++; //页面数据 不会更新
	}
	return { obj , add }
}
  • 通过 markRaw 添加的值 => 其中的属性变化,页面不会监听的到
  • 用于添加搞定的参数,不会发生不会的 ( 从而节约资源 )

Ⅴ. unref ( 拷贝 )

const aaa = ref('abc');
const bbb = unref(aaa); 
  • 相当于 bbb = isRef(aaa) ? aaa.value : aaa 的语法糖
  • 可以用于拷贝

Ⅵ. shallowRef 、shallowReactive( 非递归监听 )

shallowRef 、shallowReactive(非递归监听)

import {shallowRef,shallowReactive} from 'vue';
setup(){
	const  obj1 = shallowRef({a:1,b:{c:2})
	const  obj2 = shallowReactive({a:1,b:{c:2})

	obj1.value.a = 2  //页面未更新

	obj2.b.c = 3  //页面未更新
}
  • obj1 (shallowRef)=> 只监听第一层( value 的值,不监听a、b、c、d 的值)
  • obj2 (shallowReactive)=> 只监听第一层( a、b 的值,不监听 c 的值)

Ⅶ. triggerRef (强制更新)

import {triggerRef, shallowRef} from 'vue';
setup(){
	const  obj1 = shallowRef({a:1,b:{c:2})
    obj1.value.a = 2 //页面没有发生更新,因为只监听value第一层

	triggerRef(obj1);   // 强制更新
  • 非递归监听,只监听首层 ,消耗的资源小;
  • 配合 triggerRef 强制更新 => 性能要大于 > 直接使用 (ref 和 reactive)

vue3 响应式对象的 api 详解

🚐 💨 华为社招直通车 👉 👉 华为od面试流程
🚀🚀🚀
总结不易,希望uu们不要吝啬你们的👍哟(^U^)ノ~YO!!如有问题,欢迎评论区批评指正😁文章来源地址https://www.toymoban.com/news/detail-416188.html

到了这里,关于vue3 响应式对象的 api 详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【vue3】优雅的解决reactive()响应式对象初始化重新赋值问题v2

    关联的上篇文章: 【vue3】优雅的解决reactive()响应式对象初始化重新赋值问题_vue3 reactive重新赋值_oumae-kumiko的博客-CSDN博客 在上面该文章提到了reactive该api的不方便之处和相关重置数据方法的解析。下面提供的方法就是自己封装的`$reactive`方法,通过该方法返回响应式数据和重

    2024年02月15日
    浏览(54)
  • Vue3 ref响应式变量详解

    在Vue 3中,ref是一个函数,用于创建响应式数据。它接受一个初始值作为参数,并返回一个可变的响应式对象。 使用ref创建的响应式对象可以直接在模板中使用,并且当其值发生变化时,相关的组件会自动重新渲染。与Vue 2中的data选项不同,Vue 3推荐使用ref来创建响应式数据

    2024年02月09日
    浏览(38)
  • vue3的响应式赋值中数组array,对象object,集合set的重新赋值怎么操作,问过Chatgpt的答案

    vue3和ts结合开发的时候,总是会遇到引用数据类型的重新赋值的情况,但是在vue3中,又不能使用直接赋值的情况,因为会改变proxy的结构,导致响应式失败,那么该如何重新赋值响应式对象数据成为了一个技巧问题,今天它来了 如果是数组的话,踩坑点:**清空数组,然后再

    2024年02月15日
    浏览(58)
  • Vue3 第二节 Vue3的响应式

    1.Vue3的响应式原理 2.ref函数和reactive函数的对比 3.setup注意点 1.Vue2.x中的响应式原理 ① 实现原理 对象类型:通过Object.defineProperty() 对属性的读取,修改进行拦截(数据劫持) 数组类型:通过重写更新数据的一系列方法来实现拦截,对数组变更方法进行包裹 ② 存在问题 新增

    2024年02月14日
    浏览(35)
  • VUE3浅析---响应式

    VUE3中setup语法糖解决响应式的方案,所有的只要被ref或者reactive包裹的变量,都会转变成响应式。而在VUE2中,要想做成响应式,必须将变量定义在data函数中。 以下代码定义了三个User对象,并且都是使用ref做成了响应式,当点击按钮改变User对象的值的时候,页面上的值也会被

    2024年02月08日
    浏览(33)
  • vue3响应式原理

    Vue 3 中的响应式原理是通过使用 ES6 的 Proxy 对象来实现的。在 Vue 3 中,每个组件都有一个响应式代理对象,当组件中的数据发生变化时,代理对象会立即响应并更新视图。 具体来说,当一个组件被创建时,Vue 会为组件的 data 对象创建一个响应式代理对象。这个代理对象可以

    2024年02月15日
    浏览(71)
  • 03 SpringMVC响应数据之接收Cookie和请求头+原生API+共享域对象操作

    下载postman,测试传json数据 用@CookieValue注解将cookie值绑定到控制器中的handler参数。 Controller类中的一个handler 用@RequestHeader注解将请求头绑定到控制器中的handler参数。 需要哪一项数据 , name照写即可 什么是原生Api对象:? HttpSession、HttpServletResponse、ServletContext等在JavaWeb中学习的底

    2024年01月16日
    浏览(42)
  • 【vue3源码系列#01】vue3响应式原理(Proxy)

    专栏分享:vue2源码专栏,vue3源码专栏,vue router源码专栏,玩具项目专栏,硬核💪推荐🙌 欢迎各位ITer关注点赞收藏🌸🌸🌸 在学习 Vue3 是如何进行对象的响应式代理之前,我想我们应该先去了解下 ES6 新增的API Proxy 与 Reflect ,可参考【Vue3响应式入门#02】Proxy and Reflect 。之

    2024年02月05日
    浏览(51)
  • Vue3响应式系统(二)

    Vue3响应式系统(一) https://blog.csdn.net/qq_55806761/article/details/135587077         什么场景会用到effect嵌套呢?听我娓娓道来。         就用Vue.js来说吧,Vue.js的渲染函数就是在effect中执行的:         当组件发生嵌套的时候,渲染的时候effect函数中就会发生effect嵌套。        

    2024年01月20日
    浏览(40)
  • Vue3响应式原理 私

    响应式的本质:当数据变化后会自动执行某个函数映射到组件,自动触发组件的重新渲染。 响应式的实现方式就是劫持数据,Vue3的reactive就是通过Proxy劫持数据,由于劫持的是整个对象,所以可以检测到任何对象的修改,弥补了2.0的不足。 名词解释: **副作用函数:**函数的

    2024年02月10日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包