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

return {

name,

changeName

}

}

}

页面展示：

在vue2中name和它的方法changeName是分开的，分别分布在data属性和methods属性，当实现一个功能时，代码是分开的。试想一下，如果这个组件里需要实现很多功能，那data中可能需要很多的数据，methods中也会构造很多的方法，代码分散，就会比较难找。在工作中确实存在这种情况，有时候找个变量很费时，特别是变量跟功能特别多的时候。而对比vue3，其将相同功能的逻辑组合在一块，如该例中name的声明与修改它的方法放一起，一眼就能看到某个功能的相关实现代码，方便功能代码的维护与管理。

setup

setup是Composition API中的入口函数，它只在初始化时执行一次，且在beforeCreate生命周期之前执行，验证一下：

我是A组件

我的名字：{{name}}

<button @click=“changeName”>修改名字

在控制台先打印了setup()里面的内容，说明它在beforeCreate()之前执行，且只执行一次。这也代表着在setup执行的时候,组件对象还没有创建,组件实例对象this还不可用，不能通过this来访问data、computed、methods中的内容，所以不建议混合使用。

setup里面有两个参数props、context。

props：props为一个对象，子组件通过它拿到父组件传递下来的属性。

context：上下文对象，里面有三个属性attrs、slots、emit。attrs：获取当前组件模板标签上所有没有通过props接收的属性的对象。slots：包含所有传入的插槽内容的对象。emit：用来分发自定义事件的函数，可以进行父子组件的通信。（该内容不展开，可自行查阅深究）

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}}