目录

一、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来实现逻辑的复用。