十分鐘，帶你瞭解 Vue3 的新寫法

最近因爲項目需要，不得不學習一下 Vue3。於是花了 4 個小時，把 Vue3 過了一遍。現在我來帶你快速瞭解 Vue3 的寫法。

本文的目的，是爲了讓已經有 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> 本質上是第二種寫法的語法糖，掌握了這種寫法，其實第二種寫法也基本上就會了。（又多了一個不學第二種寫法的理由）。

二、如何使用 編寫組件

學習 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、不要解構使用

在使用時，不要像下面這樣去寫，會丟失響應性。

也就是會出現更新了值，但是頁面沒有更新的情況

xml

複製代碼

// 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 是同樣的寫法。

xml

複製代碼

// 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。

兩種寫法的區別是：

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 的官方文檔。

推薦閱讀：

參考資料

[1]

https://juejin.cn/post/7086307441847042062

關於本文

來源：Wetoria

https://juejin.cn/post/7225267685763907621

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/4euaeBYKCZRuUjYLSo9k4g

猜你喜歡