-
基本类型值(
String
、Nmuber
、Boolean
等)或单值对象(类似像{count: 3}
这样只有一个属性值的对象)使用ref
-
引用类型值(
Object
、Array
)使用reactive
toRef
是将某个对象中的某个值转化为响应式数据,其接收两个参数,第一个参数为 obj
对象;第二个参数为对象中的属性名
代码如下:
但其实表面上看上去 toRef
这个API好像非常的没用,因为这个功能也可以用 ref
实现,代码如下
乍一看好像还真是,其实这两者是有区别的,我们可以通过一个案例来比较一下,代码如下
{{ state1 }}
<button @click=“add1”>增加
{{ state2 }}
<button @click=“add2”>增加
我们分别用 ref
和 toRef
将 obj
中的 count
转化为响应式,并声明了两个方法分别使 count
值增加,每次增加后打印一下原始值 obj
和被包装过的响应式数据对象,同时还要看看视图的变化
ref:
可以看到,在对响应式数据的值进行 +1
操作后,视图改变了,原始值未改变,响应式数据对象的值也改变了,这说明 ref
是对原数据的一个拷贝,不会影响到原始值,同时响应式数据对象值改变后会同步更新视图
toRef:
可以看到,在对响应式数据的值进行 +1
操作后,视图未发生改变,原始值改变了,响应式数据对象的值也改变了,这说明 toRef
是对原数据的一个引用,会影响到原始值,但是响应式数据对象值改变后会不会更新视图
总结:
-
ref
是对传入数据的拷贝;toRef
是对传入数据的引用 -
ref
的值改变会更新视图;toRef
的值改变不会更新视图
了解完 toRef
后,就很好理解 toRefs
了,其作用就是将传入的对象里所有的属性的值都转化为响应式数据对象,该函数支持一个参数,即 obj
对象
我们来看一下它的基本使用
打印结果如下:
返回的是一个对象,对象里包含了每一个包装过后的响应式数据对象
听这个API的名称就知道,这是一个渐层的 reactive
,难道意思就是原本的 reactive
是深层的呗,没错,这是一个用于性能优化的API
其实将 obj
作为参数传递给 reactive
生成响应式数据对象时,若 obj
的层级不止一层,那么会将每一层都用 Proxy
包装一次,我们来验证一下
来看一下打印结果:
设想一下如果一个对象层级比较深,那么每一层都用 Proxy
包装后,对于性能是非常不友好的
接下来我们再来看看 shallowReactive
来看一下打印结果:
结果非常的明了了,只有第一层被 Proxy
处理了,也就是说只有修改第一层的值时,才会响应式更新,代码如下:
{{ state.a }}
{{ state.first.b }}
{{ state.first.second.c }}
<button @click=“change1”>改变1
<button @click=“change2”>改变2
来看一下具体过程:
首先我们点击了第二个按钮,改变了第二层的 b
和第三层的 c
,虽然值发生了改变,但是视图却没有进行更新;
当我们点击了第一个按钮,改变了第一层的 a
时,整个视图进行了更新;
由此可说明,shallowReactive
监听了第一层属性的值,一旦发生改变,则更新视图
这是一个浅层的 ref
,与 shallowReactive
一样是拿来做性能优化的
shallowReactive
是监听对象第一层的数据变化用于驱动视图更新,那么 shallowRef
则是监听 .value
的值的变化来更新视图的
我们来看一下具体代码
{{ state.a }}
{{ state.first.b }}
{{ state.first.second.c }}
<button @click=“change1”>改变1
<button @click=“change2”>改变2
首先看一下被 shallowRef
包装过后是怎样的结构
然后再来看看改变其值会有什么变化
我们先点击了第二个按钮,发现数据确实被改变了,但是视图并没随之更新;
于是点击了第一个按钮,即将整个 .value
重新赋值了,视图就立马更新了
这么一看,未免也太过麻烦了,改个数据还要重新赋值,不要担心,此时我们可以用到另一个API,叫做 triggerRef
,调用它就可以立马更新视图,其接收一个参数 state
,即需要更新的 ref
对象
我们来使用一下
{{ state.a }}
{{ state.first.b }}
{{ state.first.second.c }}
<button @click=“change”>改变
我们来看一下具体过程
可以看到,我们没有给 .value
重新赋值,只是在修改值后,调用了 triggerRef
就实现了视图的更新
toRaw
方法是用于获取 ref
或 reactive
对象的原始数据的
先来看一段代码
{{ state.name }}
{{ state.age }}
<button @click=“change”>改变
来看看具体过程
我们改变了 reactive
对象中的数据,于是看到原始数据 obj
和被 reactive
包装过的对象的值都发生了变化,由此我们可以看出,这两者是一个引用关系
那么此时我们就想了,那如果直接改变原始数据 obj
的值,会怎么样呢?答案是: reactive
的值也会跟着改变,但是视图不会更新
由此可见,当我们想修改数据,但不想让视图更新时,可以选择直接修改原始数据上的值,因此需要先获取到原始数据,我们可以使用 Vue3 提供的 toRaw
方法
toRaw
接收一个参数,即 ref
对象或 reactive
对象
上述代码就证明了 toRaw
方法从 reactive
对象中获取到的是原始数据,因此我们就可以很方便的通过修改原始数据的值而不更新视图来做一些性能优化了
注意: 补充一句,当
toRaw
方法接收的参数是ref
对象时,需要加上.value
才能获取到原始数据对象
markRaw
方法可以将原始数据标记为非响应式的,即使用 ref
或 reactive
将其包装,仍无法实现数据响应式,其接收一个参数,即原始数据,并返回被标记后的数据
我们来看一下代码
{{ state.name }}
{{ state.age }}
<button @click=“change”>改变
我们来看一下在被 markRaw
方法处理过后的数据是否还能被 reactive
包装成响应式数据
从图中可以看到,即使我们修改了值也不会更新视图了,即没有实现数据响应式
与 Vue2中的 provide
和 inject
作用相同,只不过在Vue3中需要手动从 vue
中导入
这里简单说明一下这两个方法的作用:
-
provide :向子组件以及子孙组件传递数据。接收两个参数,第一个参数是
key
,即数据的名称;第二个参数为value
,即数据的值 -
inject :接收父组件或祖先组件传递过来的数据。接收一个参数
key
,即父组件或祖先组件传递的数据名称
假设这有三个组件,分别是 A.vue
、B.vue
、C.vue
,其中 B.vue
是 A.vue
的子组件,C.vue
是 B.vue
的子组件
// A.vue
// B.vue
// C.vue
watch
和 watchEffect
都是用来监视某项数据变化从而执行指定的操作的,但用法上还是有所区别
watch:watch( source, cb, [options] )
参数说明:
-
source:可以是表达式或函数,用于指定监听的依赖对象
-
cb:依赖对象变化后执行的回调函数
-
options:可参数,可以配置的属性有 immediate(立即触发回调函数)、deep(深度监听)
当监听 ref
类型时:
当监听 reactive
类型时:
当同时监听多个值时:
因为 watch
方法的第一个参数我们已经指定了监听的对象,因此当组件初始化时,不会执行第二个参数中的回调函数,若我们想让其初始化时就先执行一遍,可以在第三个参数对象中设置 immediate: true
watch
方法默认是渐层的监听我们指定的数据,例如如果监听的数据有多层嵌套,深层的数据变化不会触发监听的回调,若我们想要其对深层数据也进行监听,可以在第三个参数对象中设置 deep: true
补充: watch方法会返回一个stop方法,若想要停止监听,便可直接执行该stop函数
接下来再来聊聊 watchEffect
,它与 watch
的区别主要有以下几点:
-
不需要手动传入依赖
-
每次初始化时会执行一次回调函数来自动获取依赖
-
无法获取到原值,只能得到变化后的值
来看一下该方法如何使用:
从上述代码中可以看出,我们并没有像 watch
方法一样先给其传入一个依赖,而是直接指定了一个回调函数
当组件初始化时,将该回调函数执行一次,自动获取到需要检测的数据是 state.count
和 state.name
根据以上特征,我们可以自行选择使用哪一个监听器
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
技术是没有终点的,也是学不完的,最重要的是活着、不秃。零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。
技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。有需要面试题资料的朋友点击这里可以免费领取。
e.log(state.count)
console.log(state.name)
/* 初始化时打印:
0
zs
1秒后打印:
1
ls
*/
})
setTimeout(() => {
state.count ++
state.name = ‘ls’
}, 1000)
}
}
从上述代码中可以看出,我们并没有像 watch
方法一样先给其传入一个依赖,而是直接指定了一个回调函数
当组件初始化时,将该回调函数执行一次,自动获取到需要检测的数据是 state.count
和 state.name
根据以上特征,我们可以自行选择使用哪一个监听器
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-69tzN3o7-1713805454271)]
[外链图片转存中…(img-O2zVzFP1-1713805454271)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
[外链图片转存中…(img-KGRSpid0-1713805454272)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
[外链图片转存中…(img-ezyGbp9i-1713805454272)]
最后
技术是没有终点的,也是学不完的,最重要的是活着、不秃。零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。
技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。有需要面试题资料的朋友点击这里可以免费领取。
[外链图片转存中…(img-EfhOPIQt-1713805454272)]