Vue3新特性体验--中（Composition API）

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)]