Vue2和Vue3的區別

一、Vue3的新特性

Vue3相比於Vue2引入了許多新特性。其中最顯著的特性就是Composition API。Composition API允許組件更加靈活，可以將代碼邏輯組織成更小、更可重用的邏輯塊並單獨進行測試。同時，它也可以更好地解決Vue2在代碼組織和復用方面所出現的一些問題。

Vue3還引入了多個特性，如Teleport合併了Vue2的slot和portal特性，使得彈出框和模態框等常用的UI組件更加容易實現。Suspense則可以在非同步渲染情況下控制載入中的狀態。這些特性的引入，使得Vue3變得更加小巧、高效、易用。

此外，Vue3也提供了更改進的TypeScript支持，通過引入decorators可以達到更好的代碼擴展性和可讀性。

下面是一個使用Composition API的計數器的示例：

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return {
      count,
      increment
    };
  }
}

二、Template語法變化

Vue3在模板上的變化也是非常顯著的。Vue3廢除了Vue2中的一些指令，如v-el、v-once等。同時，Vue3也把指令和屬性統一為了v-bind、v-on等統一的形式，以前綴的形式進行區分。

Vue3還引入了新的模板標記語法，如屬性綁定的簡寫形式、可選鏈語法以及nullish合併操作符：

<template>
  <div :class="{ active: isActive }">
    <span :class="[{ red: isRed }, 'text-sm']">Hello World</span>
    <img :src="user?.profile?.avatar || defaultAvatar">
    <p>{{ message ?? 'Default message' }}</p>
  </div>
</template>

三、性能優化

Vue3在性能上進行了很多的優化。其中最顯著的是針對虛擬DOM的JSX支持。對於一些性能敏感的場景，JSX的使用可以更好地生成更少且更優化的虛擬DOM。

Vue3還在體積上進行了很大程度上的優化，包括去除了一些廢棄的API、使用tree-shaking技術、支持按需載入等能夠幫助我們在優化的時候更加精細地控制應用大小。這些優化在移動端和低配置機型上體現得尤為明顯。

這裡是一個使用JSX的例子：

<script type="text/babel">
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'Button',
    props: {
      type: String
    },
    setup(props, { slots }) {
      return () => (
        <button class={[`btn-${props.type}`, 'btn']}>
          { slots.default() }
        </div>
      )
    }
  })
</script>

四、Vue2和Vue3的對比示例

下面是Vue2和Vue3的對比示例，通過這個示例我們可以更好地了解Vue2和Vue3的區別：

<!-- Vue2示例 -->
<template>
  <div class="container">
    <div v-for="item in list">{{ item.label }}</div>
    <button @click="addItem">Add Item</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { label: 'Item 1' },
        { label: 'Item 2' }
      ]
    }
  },
  methods: {
    addItem() {
      this.list.push({ label: 'Item ' + (this.list.length + 1)});
    }
  }
}
</script>

<!-- Vue3示例 -->
<template>
  <div class="container">
    <div v-for="item in list" :key="item.id">{{ item.label }}</div>
    <button @click="addItem">Add Item</button>
  </div>
</template>
<script>
import { reactive } from 'vue';

export default {
  setup() {
    const list = reactive([
      { id: 1, label: 'Item 1' },
      { id: 2, label: 'Item 2' }
    ]);
    const addItem = () => {
      list.push({ id: list.length + 1, label: 'Item ' + (list.length + 1)});
    }
    return {
      list,
      addItem
    }
  }
}
</script>