您的位置:首页 > 娱乐 > 八卦 > 【前端每日基础】day44——vue2和vue3的区别

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

2024/12/23 7:57:14 来源:https://blog.csdn.net/modaoshi51991/article/details/139480533  浏览:    关键词:【前端每日基础】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>

通过这些代码实例,您可以更清晰地看到 Vue 2 和 Vue 3 之间的一些主要区别和改进。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com