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