VUE3相比VUE2升级了哪些内容

news2024/11/19 15:37:03

一、Vue 3 、Vue 2 对比及提升项

二、 Vue 3 创建app.vue示例

三、Vue3 的setup、Vue2 的 data对比

一、Vue 3 、Vue 2 对比及提升项

性能提升：Vue 3 做了大量的优化工作，提升了运行时的性能。例如，在模板编译时进行的静态分析和优化，以及使用了更高效的响应式系统，使得数据更新性能更高。

Composition API：Vue 3 引入了 Composition API，可以让开发者更灵活地组织和复用逻辑代码。它通过 setup 方法来定义组件逻辑，并且可以使用单个 setup 函数来处理组件的状态、计算属性、方法等。

更好的 TypeScript 支持：Vue 3 对 TypeScript 的支持更加友好，包括更准确的类型推导和类型声明。使用 TypeScript 开发 Vue 3，可以获得更好的开发体验和代码健壮性。

Teleport 组件：Vue 3 引入了 Teleport 组件，可以将内容渲染到任意的 DOM 节点上，而不仅仅是当前组件的父组件。

Fragments：Vue 2 中需要使用一个根元素包裹组件的模板，而 Vue 3 支持使用 Fragments（片段）来解决这个问题，使得模板更加灵活和简洁。

二、 Vue 3 创建app.vue示例

以下是使用 Vue 3 的一个示例：

// 引入 Vue 3
import { createApp, ref } from 'vue';

// 创建一个 Vue 3 应用
const app = createApp({
  // 使用 Composition API 定义组件逻辑
  setup() {
    // 定义响应式状态
    const count = ref(0);

    // 定义一个处理点击事件的方法
    const handleClick = () => {
      count.value++;
    };

    // 返回需要渲染的模板内容
    return {
      count,
      handleClick
    };
  },
  // 渲染模板
  template: `
    <div>
      <p>Count: {{ count }}</p>
      <button @click="handleClick">Increment</button>
    </div>
  `
});

// 将应用挂载到 DOM 中
app.mount('#app');

在上面的示例中，我们使用 createApp 来创建一个 Vue 3 应用，并使用 setup 方法来定义组件的逻辑。然后，我们可以在模板中使用响应式状态 count 和点击事件处理方法 handleClick 来实现一个计数器的功能。最后，我们通过 app.mount 方法将应用挂载到指定的 DOM 节点上。

三、Vue3 的setup、Vue2 的 data对比

使用Vue3的示例：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increaseCounter">Click me!</button>
    <p>Counter: {{ counter }}</p>
  </div>
</template>

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

export default {
  setup() {
    const message = ref('Hello, Vue3!');
    const counter = ref(0);

    const increaseCounter = () => {
      counter.value++;
    };

    return {
      message,
      counter,
      increaseCounter
    };
  }
};
</script>

使用Vue2的示例：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increaseCounter">Click me!</button>
    <p>Counter: {{ counter }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue2!',
      counter: 0
    };
  },
  methods: {
    increaseCounter() {
      this.counter++;
    }
  }
};
</script>

在Vue3中，可以使用ref函数来创建响应式数据，而在Vue2中，需要在data选项中声明。
在Vue3中，使用setup函数来设置组件，返回一个对象包含所有需要暴露给模板的数据和方法，而在Vue2中，使用data选项来声明数据，使用methods选项来声明方法。
在Vue3的setup函数中，不使用this来访问数据和方法，而是直接使用变量名，而在Vue2中，使用this来访问数据和方法。
在Vue3的template标签中，使用双花括号{{ }}来进行数据绑定，而在Vue2中，使用单花括号{{ }}。
在Vue3中，使用setup函数可以更灵活的组合和复用逻辑，而在Vue2中，需要使用mixin或者mixins来实现逻辑的复用。