【前端每日基础】day44——vue2和vue3的区别

1. Composition API vs Options API

Vue 2 (Options API)
在 Vue 2 中，组件的逻辑通常是通过 data、methods、computed 等选项来定义的。

// Vue 2 组件
export default {data() {return {count: 0}},computed: {doubleCount() {return this.count * 2;}},methods: {increment() {this.count++;}}
}

Vue 3 (Composition API)
在 Vue 3 中，可以使用 Composition API，将相关的逻辑组合在一起，使代码更易于复用和维护。

// Vue 3 组件
import { ref, computed } from 'vue';export default {setup() {const count = ref(0);const doubleCount = computed(() => count.value * 2);const increment = () => {count.value++;};return {count,doubleCount,increment};}
}

2. 响应性系统

Vue 2
Vue 2 的响应性系统基于 Object.defineProperty，这意味着不能检测到对象属性的添加和删除。

// Vue 2 响应性
var vm = new Vue({data: {message: 'Hello'}
});vm.message = 'Hello Vue!'; // 响应式
vm.newProperty = 'New'; // 非响应式

Vue 3
Vue 3 使用 Proxy 实现响应性系统，能够检测到对象属性的添加和删除。

// Vue 3 响应性
import { reactive } from 'vue';const state = reactive({message: 'Hello'
});state.message = 'Hello Vue!'; // 响应式
state.newProperty = 'New'; // 也是响应式

3. TypeScript 支持

Vue 2
在 Vue 2 中使用 TypeScript 通常需要额外的配置和类型声明。

// Vue 2 中使用 TypeScript
import Vue from 'vue';
import Component from 'vue-class-component';@Component
export default class MyComponent extends Vue {message: string = 'Hello';get doubleMessage(): string {return this.message + this.message;}increment() {this.message += '!';}
}

Vue 3
Vue 3 对 TypeScript 支持更好，类型推导更加完善。

// Vue 3 中使用 TypeScript
import { defineComponent, ref, computed } from 'vue';export default defineComponent({setup() {const message = ref('Hello');const doubleMessage = computed(() => message.value + message.value);const increment = () => {message.value += '!';};return {message,doubleMessage,increment};}
});

4. 多根节点 (Fragments)

Vue 2
Vue 2 中每个组件必须有一个根节点。

<template><div><p>First paragraph</p><p>Second paragraph</p></div>
</template>

Vue 3
Vue 3 允许组件返回多个根节点。

<template><p>First paragraph</p><p>Second paragraph</p>
</template>

5. Teleport

Vue 3
Vue 3 引入了 Teleport 组件，允许开发者将某个组件的 DOM 树渲染到当前组件树之外的任意位置。

<template><div><button @click="showModal = true">Open Modal</button><Teleport to="body"><div v-if="showModal" class="modal"><p>This is a modal</p><button @click="showModal = false">Close Modal</button></div></Teleport></div>
</template><script>
import { ref } from 'vue';export default {setup() {const showModal = ref(false);return { showModal };}
}
</script>