1. 箭頭函數(shù)

在 Vue 3 中，箭頭函數(shù)被廣泛支持，尤其是在組合式 API 的上下文中。箭頭函數(shù)提供了一個更簡潔的函數(shù)書寫方式，并且不綁定自己的 this 上下文，這在某些情況下非常有用。但是，需要注意的是，在 Vue 的選項(xiàng)式 API 中，特別是在 methods 和生命周期鉤子中，通常不推薦使用箭頭函數(shù)，因?yàn)檫@些地方的 this 上下文指向組件實(shí)例，使用箭頭函數(shù)會導(dǎo)致 this 丟失。

// 選項(xiàng)式 API 中不推薦
export default {
  methods: {
    handleClick: () => {
      console.log(this.someData); // this 不會指向組件實(shí)例，可能導(dǎo)致錯誤
    }
  }
}

// 組合式 API 中推薦
import { ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return { count, increment };
  }
}

2. 函數(shù)聲明

函數(shù)聲明（或稱為命名函數(shù)）在 Vue 3 中同樣適用，尤其是在定義組件方法或者處理器時。相較于箭頭函數(shù)，命名函數(shù)有明確的名稱，更利于調(diào)試和遞歸調(diào)用，并且自然綁定 this 上下文到組件實(shí)例。

export default {
  methods: {
    handleClick() {
      console.log(this.someData); // 正確綁定了 this 上下文
    }
  },
  created() {
    this.handleClick(); // 調(diào)用方法
  }
}

3. 語法糖

Vue 3 也引入了更多的語法糖，例如 v-model 的改進(jìn)，可以同時處理多個變量綁定，并支持自定義修改器。此外，通過 <script setup> 標(biāo)簽，Vue 3 提供了一種更聲明式的組件寫法，極大簡化了代碼結(jié)構(gòu)。

<script setup>
import { ref } from 'vue';

const message = ref('');

// <script setup> 是 Vue 3 中的一個語法糖，使組件的書寫更加簡潔
</script>

<template>
  <input v-model="message">
</template>

3.1 ref 和 reactive

在 Vue 3 中，ref 和 reactive 是兩種基本的響應(yīng)式引用類型，它們是組合式 API 的核心部分。這兩種類型都允許 Vue 跟蹤依賴并在數(shù)據(jù)變化時自動更新 DOM，但它們在使用方式和適用場景上有所不同。

3.1.1 ref

ref 用于定義一個響應(yīng)式的引用數(shù)據(jù)類型。使用 ref 可以把基本數(shù)據(jù)類型（如字符串、數(shù)字、布爾值）包裝成一個響應(yīng)式對象。這個對象有一個 .value 屬性，用來獲取或設(shè)置其內(nèi)部值。

特點(diǎn)

• 可以用于基本數(shù)據(jù)類型。
• 返回一個包含 value 屬性的響應(yīng)式對象。
• 可以在模板中直接使用，無需通過 .value 訪問。
• 跨組件或模塊傳遞時，保持響應(yīng)性。

示例

import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}

3.1.2 reactive

reactive 用于創(chuàng)建一個響應(yīng)式的復(fù)雜數(shù)據(jù)對象，如對象或數(shù)組。當(dāng)這些數(shù)據(jù)對象的屬性變化時，reactive 提供的響應(yīng)式系統(tǒng)會確保視圖與數(shù)據(jù)狀態(tài)保持同步。

特點(diǎn)

• 只能用于對象或數(shù)組。
• 返回一個透明代理（Proxy）的響應(yīng)式版本，直接修改屬性即可。
• 更適合用于構(gòu)建復(fù)雜的響應(yīng)式結(jié)構(gòu)，如狀態(tài)存儲或大型對象模型。
• 傳遞 reactive 對象時，它們的響應(yīng)性會被保留。

示例

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  items: ['apple', 'banana']
});

function increment() {
  state.count++;
}

主要區(qū)別

• 數(shù)據(jù)類型支持：ref 適用于基本數(shù)據(jù)類型，而 reactive 適合復(fù)雜數(shù)據(jù)類型（對象或數(shù)組）。
• 使用方式：使用 ref 時，需要通過 .value 屬性來訪問或修改其值；使用 reactive 時，可以直接訪問或修改對象的屬性，無需額外的屬性。
• 模板引用：在模板中使用 ref 時，Vue 會自動展開 .value，讓你可以直直接引用；而 reactive 對象的屬性可以直接被訪問，無需任何額外處理。
• 設(shè)計意圖：ref 主要用于更簡單的場景和跨組件的狀態(tài)共享；reactive 更適合用來管理較為復(fù)雜的狀態(tài)邏輯或數(shù)據(jù)結(jié)構(gòu)。

選擇使用 ref 或 reactive 應(yīng)基于具體需求：如果你處理的是基本類型或需要跨組件傳遞響應(yīng)式數(shù)據(jù)，ref 是更好的選擇；如果你需要管理一個較大的數(shù)據(jù)結(jié)構(gòu)，如對象或數(shù)組，reactive 更為合適。

4. 箭頭函數(shù) VS 函數(shù)聲明

function xxx() {} 和 const xxx = () => {}

這兩種定義函數(shù)的方式各有特點(diǎn)和適用場景。這兩種方式的主要差異在于函數(shù)的作用域、this 綁定、構(gòu)造函數(shù)的能力和提升（hoisting）特性。下面我們詳細(xì)比較這兩種方式，并給出示例。

1. this 綁定

函數(shù)聲明 (function functionName() {}) 創(chuàng)建的函數(shù)擁有自己的 this 上下文，這取決于如何調(diào)用該函數(shù)。如果作為對象的方法調(diào)用，this 指向該對象；如果單獨(dú)調(diào)用，this 指向全局對象（在嚴(yán)格模式下是 undefined）。

箭頭函數(shù) (const functionName = () => {}) 不擁有自己的 this 上下文，而是繼承自封閉上下文的 this 值，通常稱為 “詞法作用域”。這使得箭頭函數(shù)非常適合用作回調(diào)函數(shù)，特別是在需要訪問外部 this 上下文的情況。

示例

const team = {
  members: ['Jane', 'Bill'],
  teamName: 'Super Squad',
  teamSummary: function() {
    // 使用函數(shù)聲明，這里的 this 指向 team 對象
    return this.members.map(function(member) {
      return `${member} is on team ${this.teamName}`; // 這里的 this 不指向 team 對象，除非使用 bind
    }.bind(this)); // 注意 bind 的使用
  }
};

const teamArrow = {
  members: ['Jane', 'Bill'],
  teamName: 'Super Squad',
  teamSummary: function() {
    // 使用箭頭函數(shù)，自動捕獲上下文中的 this
    return this.members.map(member => `${member} is on team ${this.teamName}`);
  }
};

2. 函數(shù)提升

函數(shù)聲明 在代碼執(zhí)行之前就會被提升，這意味著你可以在聲明函數(shù)之前調(diào)用它。

箭頭函數(shù) 作為變量聲明的一部分，具體到這里是 const 聲明，所以它們不會提升。你必須先定義函數(shù)，然后才能使用它。

示例

console.log(sum(10, 5)); // 正常工作，因?yàn)楹瘮?shù)提升
function sum(a, b) {
  return a + b;
}

console.log(add(10, 5)); // 報錯：add is not a function
const add = (a, b) => a + b;

3. 用作構(gòu)造函數(shù)

函數(shù)聲明 可以用作構(gòu)造函數(shù)，與 new 關(guān)鍵字一起使用來創(chuàng)建新對象。

箭頭函數(shù) 不能用作構(gòu)造函數(shù)，如果嘗試這樣做會拋出錯誤。

示例

function Person(name) {
  this.name = name;
}
const person1 = new Person('John'); // 正常工作

const Animal = (name) => {
  this.name = name;
}
const animal1 = new Animal('Dog'); // 報錯：Animal is not a constructor

總結(jié) 

到此這篇關(guān)于Vue3學(xué)習(xí)之語法糖、箭頭函數(shù)、函數(shù)聲明的文章就介紹到這了,更多相關(guān)Vue3語法糖、箭頭函數(shù)、函數(shù)聲明內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論