Vue3 shallowRef shallowReactive
ed。 人气:0嗯,怎么说呢,其实这两个函数并不是很常用,在开发过程中基本上用不到,但是呢,我不写我又感觉少点啥,所以说就简单的说一下吧,其实不看也可以哈。
shallowRef 和 shallowReactive
- shallowRef 函数,只处理基本类型数据。
- shallowReactive 函数,只处理第一层数据。
- 两个在使用的时候都需要引入才可以。
上面说了是不是还是没看懂?没关系哈,先记住上面三条,然后详细的说一下。
我们在之前的博客讲过 ref 函数和 reactive 函数,他们的作用是将数据转换成响应式的数据,在修改数据的时候,可以将数据实时展示在页面上,基本数据也好,对象也好,都是这样。
但是有一个问题呀,我们在把数据改为响应式数据的时候,不管是用 ref 函数还是使用 reactive 函数,他俩都是深度监听,啥意思呢?就是 reactive 包裹的对象,就算有100层,也就是连续点一百个属性那种,去修改最深层的数据,也是可以监听到的,这样的话就会存在问题了。
深度监听的问题:
- 无论 ref 函数还是 reactive 函数都是深度监听。
- 如果数据量过大,超级超级消耗性能。
- 如果我们不需要对数据进行深度监听的时候,就可以使用 shallowRef 函数和 shallowReactive 函数。
明白了吗?不明白没关系,我们通过几个案例就知道了。
使用 shallowReactive 非深度监听
记住一点,shallowReactive 函数,只能处理第一层数据。
假设我们页面有一个个人信息展示,有名字、有年龄需要展示,我们数据是存在 boy 对象里面,然后 age 是在 boy 对象的 news 属性下面,也就是深层,但是 name 是在 boy 对象下面,也就是第一层,我们有两个按钮,分别修改 name 和 age,看一下会有什么效果。
<template> <div> <h1>姓名:{{name}}</h1> <h1>年龄:{{news.age}}</h1> <button @click="btn">修改name</button> <button @click="btn2">修改age</button> </div> </template> <script> import { shallowReactive, toRefs } from "vue"; export default { name: "App", setup() { const boy = shallowReactive({ name: "我是
加载全部内容
- 猜你喜欢
- 用户评论