花 10 分鐘快速了解下 Vue3 的新寫法
一、Vue3 里 script 的三種寫法
1、最基本的 Vue2 寫法
<template><div>{{ count }}</div><button @click="onClick">增加 1</button></template><script>export default {data() {return {count: 1,};},methods: {onClick() {this.count += 1;},},}</script>
2、setup() 屬性
<template><div>{{ count }}</div><button @click="onClick">增加 1</button></template><script>import { ref } from 'vue';export default {// 注意這部分setup() {let count = ref(1);const onClick = () => {count.value += 1;};return {count,onClick,};},}</script>
3、script setup
<template><div>{{ count }}</div><button @click="onClick">增加 1</button></template><script setup>import { ref } from 'vue';const count = ref(1);const onClick = () => {count.value += 1;};</script>
正如你看到的那樣，無論是代碼行數(shù)，還是代碼的精簡(jiǎn)度，<script setup> 的方式是最簡(jiǎn)單的形式。
如果你對(duì) Vue 很熟悉，那么，我推薦你使用 <script setup> 的方式。
這種寫法，讓 Vue3 成了我最喜歡的前端框架。
如果你還是前端新人，那么，我推薦你先學(xué)習(xí)第一種寫法。
因?yàn)榈谝环N寫法的學(xué)習(xí)負(fù)擔(dān)更小，先學(xué)第一種方式，掌握最基本的 Vue 用法，然后再根據(jù)我這篇文章，快速掌握 Vue3 里最需要關(guān)心的內(nèi)容。
第一種寫法，跟過去 Vue2 的寫法是一樣的，所以我們不過多介紹。
第二種寫法，所有的對(duì)象和方法都需要 return 才能使用，太啰嗦。除了舊項(xiàng)目，可以用這種方式體驗(yàn) Vue3 的新特性以外，我個(gè)人不建議了解這種方式。反正我自己暫時(shí)不打算精進(jìn)這部分。
所以，接下來，我們主要介紹的，也就是 <script setup> ，這種寫法里需要了解的內(nèi)容。
注意： <script setup> 本質(zhì)上是第二種寫法的語(yǔ)法糖，掌握了這種寫法，其實(shí)第二種寫法也基本上就會(huì)了。（又多了一個(gè)不學(xué)第二種寫法的理由）。
二、如何使用 script setup編寫組件
學(xué)習(xí) Vue3 并不代表你需要新學(xué)習(xí)一個(gè)技術(shù)，Vue3 的底層開發(fā)思想，跟 Vue2 是沒有差別的。
V3 和 V2 的區(qū)別就像是，你用不同的語(yǔ)言或者方言說同一句話。
所以我們需要關(guān)心的，就是 Vue2 里的內(nèi)容，怎么用 Vue3 的方式寫出來。
1、data——唯一需要注意的地方
整個(gè) data 這一部分的內(nèi)容，你只需要記住下面這一點(diǎn)。
以前在 data 中創(chuàng)建的屬性，現(xiàn)在全都用 ref() 聲明。
在 template 中直接用，在 script 中記得加 .value 。
在開頭，我就已經(jīng)寫了一個(gè)簡(jiǎn)單的例子，我們直接拿過來做對(duì)比。
1）寫法對(duì)比
// Vue2 的寫法<template><div>{{ count }}</div><button @click="onClick">增加 1</button></template><script>export default {data() {return {count: 1,};},methods: {onClick() {this.count += 1;},},}</script>// Vue3 的寫法<template><div>{{ count }}</div><button @click="onClick">增加 1</button></template><script setup>import { ref } from 'vue';// 用這種方式聲明const count = ref(1);const onClick = () => {// 使用的時(shí)候記得 .valuecount.value += 1;};</script>
2）注意事項(xiàng)——組合式 api 的心智負(fù)擔(dān)
a、ref 和 reactive
Vue3 里，還提供了一個(gè)叫做 reactive 的 api。
但是我的建議是，你不需要關(guān)心它。絕大多數(shù)場(chǎng)景下，ref 都?jí)蛴昧恕?/p>
b、什么時(shí)候用 ref() 包裹，什么時(shí)候不用。
要不要用ref，就看你的這個(gè)變量的值改變了以后，頁(yè)面要不要跟著變。
當(dāng)然，你可以完全不需要關(guān)心這一點(diǎn)，跟過去寫 data 一樣就行。
只不過這樣做，你在使用的時(shí)候，需要一直 .value。
c、不要解構(gòu)使用
在使用時(shí)，不要像下面這樣去寫，會(huì)丟失響應(yīng)性。
也就是會(huì)出現(xiàn)更新了值，但是頁(yè)面沒有更新的情況
// Vue3 的寫法<template><div>{{ count }}</div><button @click="onClick">增加 1</button></template><script setup>import { ref } from 'vue';const count = ref(1);const onClick = () => {// 不要這樣寫??！const { value } = count;value += 1;};</script>
注意： 學(xué)習(xí) Vue3 就需要考慮像這樣的內(nèi)容，徒增了學(xué)習(xí)成本。實(shí)際上這些心智負(fù)擔(dān)，在學(xué)習(xí)的過程中，是可以完全不需要考慮的。
這也是為什么我推薦新人先學(xué)習(xí) Vue2 的寫法。
2、methods
聲明事件方法，我們只需要在 script 標(biāo)簽里，創(chuàng)建一個(gè)方法對(duì)象即可。
剩下的在 Vue2 里是怎么寫的，Vue3 是同樣的寫法。
// Vue2 的寫法<template><div @click="onClick">這是一個(gè)div</div></template><script>export default {methods: {onClick() {console.log('clicked')},},}</script>// Vue3 的寫法<template><div @click="onClick">這是一個(gè)div</div></template><script setup>// 注意這部分const onClick = () => {console.log('clicked')}</script>
3、props
聲明 props 我們可以用 defineProps()，具體寫法，我們看代碼。
1）寫法對(duì)比
// Vue2 的寫法<template><div>{{ foo }}</div></template><script>export default {props: {foo: String,},created() {console.log(this.foo);},}</script>// Vue3 的寫法<template><div>{{ foo }}</div></template><script setup>// 注意這里const props = defineProps({foo: String})// 在 script 標(biāo)簽里使用console.log(props.foo)</script>
2）注意事項(xiàng)——組合式 api 的心智負(fù)擔(dān)
使用 props 時(shí)，同樣注意不要使用解構(gòu)的方式。
<script setup>const props = defineProps({foo: String})// 不要這樣寫const { foo } = props;console.log(foo)</script>
4、emits 事件
與 props 相同，聲明 emits 我們可以用 defineEmits()，具體寫法，我們看代碼。
// Vue2 的寫法<template><div @click="onClick">這是一個(gè)div</div></template><script>export default {emits: ['click'], // 注意這里methods: {onClick() {this.$emit('click'); // 注意這里},},}</script>// Vue3 的寫法<template><div @click="onClick">這是一個(gè)div</div></template><script setup>// 注意這里const emit = defineEmits(['click']);const onClick = () => {emit('click') // 注意這里}</script>
5、computed
直接上寫法對(duì)比。
// Vue2 的寫法<template><div><span>{{ value }}</span><span>{{ reversedValue }}</span></div></template><script>export default {data() {return {value: 'this is a value',};},computed: {reversedValue() {return value.split('').reverse().join('');},},}</script>// Vue3 的寫法<template><div><span>{{ value }}</span><span>{{ reversedValue }}</span></div></template><script setup>import {ref, computed} from 'vue'const value = ref('this is a value')// 注意這里const reversedValue = computed(() => {// 使用 ref 需要 .valuereturn value.value.split('').reverse().join('');})</script>
6、watch
這一部分，我們需要注意一下了，Vue3 中，watch 有兩種寫法。一種是直接使用 watch，還有一種是使用 watchEffect。
兩種寫法的區(qū)別是：
-
watch 需要你明確指定依賴的變量，才能做到監(jiān)聽效果。
-
而 watchEffect 會(huì)根據(jù)你使用的變量，自動(dòng)的實(shí)現(xiàn)監(jiān)聽效果。
1）直接使用 watch
// Vue2 的寫法<template><div>{{ count }}</div><div>{{ anotherCount }}</div><button @click="onClick">增加 1</button></template><script>export default {data() {return {count: 1,anotherCount: 0,};},methods: {onClick() {this.count += 1;},},watch: {count(newValue) {this.anotherCount = newValue - 1;},},}</script>// Vue3 的寫法<template><div>{{ count }}</div><div>{{ anotherCount }}</div><button @click="onClick">增加 1</button></template><script setup>import { ref, watch } from 'vue';const count = ref(1);const onClick = () => {count.value += 1;};const anotherCount = ref(0);// 注意這里// 需要在這里，// 明確指定依賴的是 count 這個(gè)變量watch(count, (newValue) => {anotherCount.value = newValue - 1;})</script>
2）使用 watchEffect
// Vue2 的寫法<template><div>{{ count }}</div><div>{{ anotherCount }}</div><button @click="onClick">增加 1</button></template><script>export default {data() {return {count: 1,anotherCount: 0,};},methods: {onClick() {this.count += 1;},},watch: {count(newValue) {this.anotherCount = newValue - 1;},},}</script>// Vue3 的寫法<template><div>{{ count }}</div><div>{{ anotherCount }}</div><button @click="onClick">增加 1</button></template><script setup>import { ref, watchEffect } from 'vue';const count = ref(1);const onClick = () => {count.value += 1;};const anotherCount = ref(0);// 注意這里watchEffect(() => {// 會(huì)自動(dòng)根據(jù) count.value 的變化，// 觸發(fā)下面的操作anotherCount.value = count.value - 1;})</script>
7、生命周期
Vue3 里，除了將兩個(gè) destroy 相關(guān)的鉤子，改成了 unmount，剩下的需要注意的，就是在 <script setup> 中，不能使用 beforeCreate 和 created 兩個(gè)鉤子。
如果你熟悉相關(guān)的生命周期，只需要記得在 setup 里，用 on 開頭，加上大寫首字母就行。
// 選項(xiàng)式 api 寫法<template><div></div></template><script>export default {beforeCreate() {},created() {},beforeMount() {},mounted() {},beforeUpdate() {},updated() {},// Vue2 里叫 beforeDestroybeforeUnmount() {},// Vue2 里叫 destroyedunmounted() {},// 其他鉤子不常用，所以不列了。}</script>// 組合式 api 寫法<template><div></div></template><script setup>import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,} from 'vue'onBeforeMount(() => {})onMounted(() => {})onBeforeUpdate(() => {})onUpdated(() => {})onBeforeUnmount(() => {})onUnmounted(() => {})</script>
三、結(jié)語(yǔ)
好了，對(duì)于快速上手 Vue3 來說，以上內(nèi)容基本已經(jīng)足夠了。
這篇文章本身不能做到幫你理解所有 Vue3 的內(nèi)容，但是能幫你快速掌握 Vue3 的寫法。
如果想做到對(duì) Vue3 的整個(gè)內(nèi)容心里有數(shù)，還需要你自己多看看 Vue3 的官方文檔。