语法介绍
我们在写Vue2的时候，编写组件的⽅式是使⽤Options API，这种⽅式的特点就是在对应的属性编写对应的功能模块，例如在data中定义数据、methods定义⽅法等；这种⽅法的弊端就是同⼀功能的代码逻辑被拆分到各个属性中，影响代码的阅读。随着业务复杂度越来越⾼，代码量会不断的加⼤；由于相关业务的代码需要遵循option的配置写到特定的区域，导致后续维护⾮常的复杂，代码可复⽤性也不⾼。
随着业务复杂度越来越⾼，代码量会不断的加⼤；由于相关业务的代码需要遵循option的配置写到特定的区域，导致后续维护⾮常的复杂，代码可复⽤性也不⾼。
显然我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在⼀起
语法对⽐
响应式数据
在Vue3中创建响应式的数据主要是通过reactive和ref这两个API实现的，现在我们就来依次学习⼀下这两个以及相关的API。
reactive
reactive API⽤于创建响应式的对象或者数组，实际上该⽅法的内部就是基于ES6的Proxy实现的。
如下代码展示了reactive API的⽤法：
<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>
ref
我们使⽤reactive只能对Object或者Array类型的数据进⾏劫持，如果我们想要对普通数据类型的数据进⾏劫持，可以使⽤ref API，例如如下代码：
<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>
函数
特别注意的是，setup的语法中是没有this的，因此取变量值的时候不需要使⽤this调⽤
Options API
<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>
Composition API
<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中定义计算属性是通过computed⽅法实现，返回⼀个ref对象。
计算属性的⽤法：
Options API
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)
}
},
Composition API
import { ref, computed } from 'vue'
const name = ref('⼀碗周')
const age = ref('18')
// 定义计算属性
const user = computed(() => {
return `姓名：${name.value}\n年龄：${age.value}`
})
侦听
Options API
watch:{
n(){
console.log('n变了')
}
},
Composition API
<script setup>
import { ref, watch } from 'vue'
const n = ref('')
// 可以直接侦听⼀个 ref
watch(n, (newValue,oldValue)=>{
console.log('新值：'+newValue,'原值：'+oldValue)
})
</script>
⽣命周期
import { onMounted, onUpdated, onUnmounted } from 'vue'
onMounted(() => {
console.log('onMounted')
})
onUpdated(() => {
console.log('onUpdated')
})
onUnmounted(() => {
console.log('onUnmounted')
})
