最近，因為項目需要，不得不學習一下 vue3。于是花了 4 個小時，把 Vue3 過了一遍?，F在我來帶你快速了解 Vue3 的寫法。d0X28資訊網——每日最新資訊28at.com

d0X28資訊網——每日最新資訊28at.com

本文的目的，是為了讓已經有 Vue2 開發經驗的 人 ，快速掌握 Vue3 的寫法。d0X28資訊網——每日最新資訊28at.com

因此， 本篇假定你已經掌握 Vue 的核心內容 ，只為你介紹編寫 Vue3 代碼，需要了解的內容。d0X28資訊網——每日最新資訊28at.com

一、Vue3 里 script 的三種寫法

首先，Vue3 新增了一個叫做組合式 api 的東西，英文名叫 Composition API。因此 Vue3 的 script 現在支持三種寫法，d0X28資訊網——每日最新資訊28at.com

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> 的方式是最簡單的形式。d0X28資訊網——每日最新資訊28at.com

如果你對 Vue 很熟悉，那么，我推薦你使用 <script setup> 的方式。d0X28資訊網——每日最新資訊28at.com

這種寫法，讓 Vue3 成了我最喜歡的前端框架。d0X28資訊網——每日最新資訊28at.com

如果你還是前端新人，那么，我推薦你先學習第一種寫法。d0X28資訊網——每日最新資訊28at.com

因為第一種寫法的學習負擔更小，先學第一種方式，掌握最基本的 Vue 用法，然后再根據我這篇文章，快速掌握 Vue3 里最需要關心的內容。d0X28資訊網——每日最新資訊28at.com

第一種寫法，跟過去 Vue2 的寫法是一樣的，所以我們不過多介紹。d0X28資訊網——每日最新資訊28at.com

第二種寫法，所有的對象和方法都需要 return 才能使用，太啰嗦。除了舊項目，可以用這種方式體驗 Vue3 的新特性以外，我個人不建議了解這種方式。反正我自己暫時不打算精進這部分。d0X28資訊網——每日最新資訊28at.com

所以，接下來，我們主要介紹的，也就是 <script setup> ，這種寫法里需要了解的內容。d0X28資訊網——每日最新資訊28at.com

注意： <script setup> 本質上是第二種寫法的語法糖，掌握了這種寫法，其實第二種寫法也基本上就會了。（又多了一個不學第二種寫法的理由）。d0X28資訊網——每日最新資訊28at.com

二、如何使用 script setup編寫組件

學習 Vue3 并不代表你需要新學習一個技術，Vue3 的底層開發思想，跟 Vue2 是沒有差別的。d0X28資訊網——每日最新資訊28at.com

V3 和 V2 的區別就像是，你用不同的語言或者方言說同一句話。d0X28資訊網——每日最新資訊28at.com

所以我們需要關心的，就是 Vue2 里的內容，怎么用 Vue3 的方式寫出來。d0X28資訊網——每日最新資訊28at.com

1、data——唯一需要注意的地方

整個 data 這一部分的內容，你只需要記住下面這一點。d0X28資訊網——每日最新資訊28at.com

以前在 data 中創建的屬性，現在全都用 ref() 聲明。d0X28資訊網——每日最新資訊28at.com

在 template 中直接用，在 script 中記得加 .value 。d0X28資訊網——每日最新資訊28at.com

在開頭，我就已經寫了一個簡單的例子，我們直接拿過來做對比。d0X28資訊網——每日最新資訊28at.com

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。d0X28資訊網——每日最新資訊28at.com

但是我的建議是，你不需要關心它。絕大多數場景下，ref 都夠用了。d0X28資訊網——每日最新資訊28at.com

b、什么時候用 ref() 包裹，什么時候不用。

要不要用ref，就看你的這個變量的值改變了以后，頁面要不要跟著變。d0X28資訊網——每日最新資訊28at.com

當然，你可以完全不需要關心這一點，跟過去寫 data 一樣就行。d0X28資訊網——每日最新資訊28at.com

只不過這樣做，你在使用的時候，需要一直 .value。d0X28資訊網——每日最新資訊28at.com

c、不要解構使用

在使用時，不要像下面這樣去寫，會丟失響應性。d0X28資訊網——每日最新資訊28at.com

也就是會出現更新了值，但是頁面沒有更新的情況d0X28資訊網——每日最新資訊28at.com

// 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 就需要考慮像這樣的內容，徒增了學習成本。實際上這些心智負擔，在學習的過程中，是可以完全不需要考慮的。d0X28資訊網——每日最新資訊28at.com

這也是為什么我推薦新人先學習 Vue2 的寫法。d0X28資訊網——每日最新資訊28at.com

2、methods

聲明事件方法，我們只需要在 script 標簽里，創建一個方法對象即可。d0X28資訊網——每日最新資訊28at.com

剩下的在 Vue2 里是怎么寫的，Vue3 是同樣的寫法。d0X28資訊網——每日最新資訊28at.com

// Vue2 的寫法<template>  <@click="onClick">    這是一個 </div></template><script>export default {  methods: {    onClick() {      console.log('clicked')    },  },}</script>// Vue3 的寫法<template>  <@click="onClick">    這是一個 </div></template><script setup>// 注意這部分const onClick = () => {  console.log('clicked')}</script>

3、props

聲明 props 我們可以用 defineProps()，具體寫法，我們看代碼。d0X28資訊網——每日最新資訊28at.com

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 時，同樣注意不要使用解構的方式。d0X28資訊網——每日最新資訊28at.com

<script setup>const props = defineProps({  foo: String}) // 不要這樣寫const { foo } = props;console.log(foo)</script>

4、emits 事件

與 props 相同，聲明 emits 我們可以用 defineEmits()，具體寫法，我們看代碼。d0X28資訊網——每日最新資訊28at.com

// Vue2 的寫法<template>  <@click="onClick">    這是一個 </div></template><script>export default {  emits: ['click'], // 注意這里  methods: {    onClick() {      this.$emit('click'); // 注意這里    },  },}</script>// Vue3 的寫法<template>  <@click="onClick">    這是一個 </div></template><script setup>// 注意這里const emit = defineEmits(['click']);const onClick = () => {  emit('click') // 注意這里}</script>

5、computed

直接上寫法對比。d0X28資訊網——每日最新資訊28at.com

// 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。d0X28資訊網——每日最新資訊28at.com

兩種寫法的區別是：d0X28資訊網——每日最新資訊28at.com

• 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 兩個鉤子。d0X28資訊網——每日最新資訊28at.com

如果你熟悉相關的生命周期，只需要記得在 setup 里，用 on 開頭，加上大寫首字母就行。d0X28資訊網——每日最新資訊28at.com

// 選項式 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 來說，以上內容基本已經足夠了。d0X28資訊網——每日最新資訊28at.com

這篇文章本身不能做到幫你理解所有 Vue3 的內容，但是能幫你快速掌握 Vue3 的寫法。d0X28資訊網——每日最新資訊28at.com

如果想做到對 Vue3 的整個內容心里有數，還需要你自己多看看 Vue3 的官方文檔。d0X28資訊網——每日最新資訊28at.com

本文鏈接：http://m.rrqrq.com/showinfo-26-6172-0.html十分鐘，帶你了解 Vue3 的新寫法

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 如何使用 Python 生成和讀取條形碼

下一篇： 六種在 React 中獲取數據的方法