ref
ref在vue3中定义一个具有响应性数据,可以是基本数据类型,也可以是对象。类似vue2中data中的响应式变量。
let name = ref(‘leo’)
返回的是一个对象,真实值放于其value属性,不妨打印出来看看。
let name = ref(‘leo’)
console.log(name,‘ref’) //控制台打印,查看返回数据结构
注意:在改变name(ref类型对象)的值的时候,不能直接“name = ”而需要“name.value = ”。
reactive
可以定义多个具有响应性的数据,接收一个对象,返回该对象的响应式代理器对象(Proxy),而且代理了该对象中所有的属性,不管该对象层级多深,所有的属性都具有响应性。对比vue2中让对象具有相应性的方式是遍历该对象中所有的属性,通过defineProperty()劫持属性的getter、setter,使其具有响应性。当存在多个对象,且对象层级很深,那么遍历所有属性使其都具有响应性,这是耗时间、耗资源的过程。vue3通过代理的方式改进了这个过程,提高了效率。
举个例子,创建一个爱好like对象,代理使其具有响应性。
我是A组件
我的名字:{{name}}
<button @click=“changeName”>改变内容
喜欢的电影:{{like.movie}}
喜欢的音乐:{{like.music}}
观察控制台打印结果,跟ref不一样,真实的值不在value中,而是在对象原本对应的属性中,因此修改值时候不需要加“.value”。
初始页面
点击按钮,验证其响应性
computed
计算属性与vue2中的基本一致,举个例子:
计算属性的函数中如果只传入一个回调函数,表示一个get的过程
我是A组件
我的名字:{{name}}
<button @click=“changeName”>改变内容
{{content}}
通过控制台打印出来,发现与ref类型的数据结构一样,说明computed返回的是一个ref类型的数据。
注意:computed返回的ref类型的.value是只读属性,不允许修改。
function changeName(){
name.value = ‘lion’
like.movie = ‘战狼2’
content.value = ‘注意啦!!!’ + content.value
}
计算属性当然也可以传入一个对象,里面可以存在读、写方法,打印观察。
let content = computed({
get(){
return ‘我喜欢看:’ + like.movie + ‘;喜欢听:’ + like.music
},
set(newVal){
like.movie = newVal
}
})
console.log(content,‘content’)
watch
watch与vue2中的配置一致。都是包括要监听的数据、回调函数、监听配置。
我是A组件
我的名字:{{name}}
<button @click=“changeName”>改变内容
{{content}}
{{newContent}}
初始页面
watch页面加载完毕默认不执行,希望立即执行,修改如下配置(deep:true,深度监听)
watch(
like,
({movie,music})=>{
newContent.value = ‘我更喜欢看:’ + movie + ‘;更喜欢听:’ + music
},
{immediate:true,deep: true} //immediate:true立即执行
)
查看页面,此时newContent中的movie是初始值
点击按钮,movie改变,watch监听到变化,newContent的值相应改变
扩展:watch监听多个数据,使用一个数组
我是A组件
我的名字:{{name}}
<button @click=“changeName”>改变内容
{{content}}
{{newContent}}
初始页面
点击按钮,实现watch对多数据进行监听
watchEffect
最后
技术是没有终点的,也是学不完的,最重要的是活着、不秃。零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。
70,g_se,x_16)
点击按钮,实现watch对多数据进行监听
watchEffect
最后
技术是没有终点的,也是学不完的,最重要的是活着、不秃。零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。
[外链图片转存中…(img-xQwG8NsT-1714360505215)]