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

来源:https://www.cnblogs.com/houxianzhou/p/18174444
-Advertisement-
Play Games

本文的目的，是為了讓已經有 Vue2 開發經驗的 人 ，快速掌握 Vue3 的寫法。 因此， 本篇假定你已經掌握 Vue 的核心內容 ，只為你介紹編寫 Vue3 代碼，需要瞭解的內容。 一、Vue3 里 script 的三種寫法 首先，Vue3 新增了一個叫做組合式 api 的東西，英文名叫 Com ...


本文的目的，是為了讓已經有 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 的官方文檔

本文來自博客園，作者：喆星高照，轉載請註明原文鏈接：https://www.cnblogs.com/houxianzhou/p/18174444


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 進程間通信
    title: 進程間通信 cover: https://img2.imgtp.com/2024/04/30/9GnvXoDg.png tags: - 通信 - linux categories: linux系統編程 引言 進程間通信（interprocess communication，簡稱 IPC ...
  • Linux基礎之網路管理
    目錄網路配置服務管理防火牆配置文件下載wget和curl網路連接信息netstat和ss Linux 網路管理涉及一系列任務，包括配置網路介面、設置IP地址、管理網路服務和防火牆等。 網路配置 網卡命名 根據網路介面定義設備： ethX 傳統的乙太網介面命名方式，其中 X 通常是數字，如 eth0 ...
  • 大數據面試SQL每日一題系列：最高峰同時線上主播人數。位元組，快手等大廠高頻面試題
    大數據面試SQL每日一題系列：最高峰同時線上主播人數。位元組，快手等大廠高頻面試題 之後會不定期更新每日一題sql系列。 SQL面試題每日一題系列內容均來自於網路以及實際使用情況收集，如有雷同，純屬巧合。 1.題目 問題1：如下為某直播平臺各主播的開播及關播時間數據明細，現在需要計算該平臺最高峰期同時 ...
  • mysql安裝使用教程
    一、下載mysql安裝包 官網：https://dev.mysql.com/downloads/mysql/ 預設會跳轉到最新版本的下載頁面，也可以在舊版本集中選擇需要安裝的版本。 MSI Installer是安裝程式，ZIP Archive是壓縮包形式。 二、安裝mysql MSI安裝程式會有圖形 ...
  • Redis開源社區持續壯大，華為雲為Valkey項目註入新的活力
    摘要：作為Valkey社區的Technical Steering Committee member，華為雲將持續參與社區建設。 一、背景 今年3月21日，Redis Labs宣佈從Redis 7.4版本開始，將原先比較寬鬆的BSD源碼使用協議修改為RSAv2和SSPLv1協議，意味著 Redis在O ...
  • SQL Server實戰四：查詢資料庫的數據
    本文介紹基於Microsoft SQL Server軟體，實現資料庫表中多種數據查詢方法的具體操作。 目錄1 指定列或全部列查詢——查詢S表學生記錄2 指定列或全部列查詢——查詢學生姓名與出生年份3 按條件查詢及模糊查詢——查詢成績不及格學生學號4 按條件查詢及模糊查詢——查詢20-23歲間學生姓名 ...
  • kafka核心概念Broker、Topic、Partition和Replication
    在Kafka中，Broker、Topic、Partition和Replication是四個核心概念，它們各自扮演了不同的角色並共同協作以確保數據的可靠性、可擴展性和高性能。以下是關於這四個概念的詳細解釋： Broker（代理） * Broker是Kafka集群中的一個節點，負責存儲和轉發消息。Kaf ...
  • 說說你對盒子模型的理解?
    一、是什麼 當對一個文檔進行佈局（layout）的時候，瀏覽器的渲染引擎會根據標準之一的 CSS 基礎框盒模型（CSS basic box model），將所有元素表示為一個個矩形的盒子（box） 一個盒子由四個部分組成：content、padding、border、margin content，即 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類