Composition API对⽐Options API

语法介绍

我们在写Vue2的时候，编写组件的⽅式是使⽤Options API，这种⽅式的特点就是在对应的属性编写对应 的功能模块，例如在 data 中定义数据、 methods 定义⽅法等；这种⽅法的弊端就是同⼀功能的代码逻辑 被拆分到各个属性中，影响代码的阅读。随着业务复杂度越来越⾼，代码量会不断的加⼤；由于相关业 务的代码需要遵循option的配置写到特定的区域，导致后续维护⾮常的复杂，代码可复⽤性也不⾼。 随着业务复杂度越来越⾼，代码量会不断的加⼤；由于相关业务的代码需遵循option的配置写到特定 的区域，导致后续维护⾮常的复杂，代码可复⽤性也不⾼。

1 显然我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在⼀起

2 3 语法对⽐响应式数据 在Vue3中创建响应式的数据主要是通过reactive和ref这两个API实现的，现在我们就来依次学习⼀下这两 个以及相关的API。

reactive

reactive API⽤于创建响应式的对象或者数组，实际上该⽅法的内部就是基于ES6的Proxy实现的。

如下代码展示了reactive API的⽤法：

4 5

我们使⽤ reactive 只能对Object或者Array类型的数据进⾏劫持，如果我们想要对普通数据类型的数据进

⾏劫持，可以使⽤ ref API，例如如下代码：

ref

< template >

< h3 > 信息展示组件 </ h3 >

< div style = "margin: 24px 0" >

< span > 姓名： </ span >

< span >{{ data . name }}</ span >

< br />

< span > 年龄： </ span >

< span >{{ data . age }}</ span >

</ div >

< button @click="data.name = ' ⼀碗周 '"> 修改姓名 </ button >

< br />

< button @click="data.age = '20'"> 修改年龄 </ button >

</ template >

< script setup >

// 使⽤ <script setup> 所有的 API 需要单独引⼊，除 Vue3.2 ⾃动引⼊的⼏个 API 外。

import { reactive } from 'vue'

// 创建响应式对象

const data = reactive ({

name : ' ⼀碗粥 ' ,

age : '18' ,

})

</ script >

Vue 6

特别注意的是，setup的语法中是没有this的，因此取变量值的时候不需要使⽤this调⽤

函数

< template >

< h3 > 信息展示组件 </ h3 >

< div style = "margin: 24px 0" >

< span > 姓名： </ span >

<!-- 在模板中， Vue 会⾃动帮助我们为 ref 进⾏解包，所以不需要使⽤ ref.value 的形

式 -->

< span >{{ name }}</ span >

< br />

< span > 年龄： </ span >

< span >{{ age }}</ span >

</ div >

< button @click="handleEditName"> 修改姓名 </ button >

< br />

< button @click="handleEditAge"> 修改年龄 </ button >

</ template >

< script setup >

// 导⼊ ref

import { ref } from 'vue'

// 创建响应式对象

const name = ref ( ' ⼀碗粥 ' )

const age = ref ( 18 )

const handleEditName = () => {

// 通过 ref 创造的响应式对象，我们需要通过 ref.value 的⽅式访问

name . value = ' ⼀碗周 '

}

const handleEditAge = () => {

age . value = '20'

}

</ script >

Vue 7

< template >

< div >

<!-- `greet` 是上⾯定义过的⽅法名 -->

< button @click="greet">Greet</ button >

</ div >

</ template >

< script >

export default {

// 定义属性

data () {

return {

name : 'Vue.js'

}

},

methods : {

greet ( event ) {

// ⽅法中的 `this` 指向当前活跃的组件实例

alert ( `Hello ${ this. name } !` )

// `event` 是 DOM 原⽣事件

if ( event ) {

alert ( event . target . tagName )

}

}

},

}

</ script >

Options API

Vue 8

在Composition API中定义计算属性是通过 computed ⽅法实现，返回⼀个 ref 对象。

计算属性的⽤法：

计算属性

< template >

< div >

<!-- `greet` 是上⾯定义过的⽅法名 -->

< button @click="greet">Greet</ button >

</ div >

</ template >

< script setup >

// 导⼊ ref

import { ref } from 'vue'

const name = ref ( 'Vue.js' )

function greet ( event ) {

alert ( `Hello ${ name . value } !` )

// `event` 是 DOM 原⽣事件

if ( event ) {

alert ( event . target . tagName )

}

}

</ script >

Composition API

Vue

computed: {

badgeNum () {

// 筛选 todosArray 中 status 为 1 的元素的个数

return this. todosArray . filter ( item => item . status === 1 ) . length

},

noDeleteArray () {

// 筛选出 todsArray 中 status 不等于 0 的元素

return this. todosArray . filter ( item => item . status !== 0 )

}

},

Options API

Vue 9

侦听

⽣命周期

import { ref , computed } from 'vue'

const name = ref ( ' ⼀碗周 ' )

const age = ref ( '18' )

// 定义计算属性

const user = computed (() => {

return ` 姓名： ${ name . value } \n 年龄： ${ age . value } `

})

Composition API

Vue

watch: {

n (){

console . log ( 'n 变了 ' )

}

},

Options API

Vue

< script setup >

import { ref , watch } from 'vue'

const n = ref ( '' )

// 可以直接侦听⼀个 ref

watch ( n , ( newValue , oldValue )=>{

console . log ( ' 新值： ' + newValue , ' 原值： ' + oldValue )

})

</ script >

Composition API

Vue 10

import { onMounted , onUpdated , onUnmounted } from 'vue'

onMounted (() => {

console . log ( 'onMounted' )

})

onUpdated (() => {

console . log ( 'onUpdated' )

})

onUnmounted (() => {

console . log ( 'onUnmounted' )

})