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>