从 Vue 2 到 Vue 3：用一个 Todos 组件见证前端框架的华丽变身 🚀

随着前端开发技术的不断进步，Vue也经历了显著的演进。今天，我们将通过一个简单的待办事项（Todos）组件，带您深入了解从 Vue 2 到 Vue 3 的转变，揭示 Vue 3 所带来的诸多改进和增强，感受vue2到vue3的进化之路。想要了解前端框架的具体进化史可跳转：

从结绳记事到学富五车：前端开发的进化史 - 掘金

具体效果:

1. HTML结构

xml 复制代码

<div id="app">
    <h2>{{ title }}</h2>
    <input type="text" v-model="title" @keydown.enter="addTodo"> 
    <ul>
        <li v-for="(todo, index) in todos" :key="index">
            <input type="checkbox" v-model="todo.done">
            <span :class="{ done: todo.done }">{{ todo.title }}</span>
        </li>
    </ul>
    <div>
        <label>
            <span>全选</span><input type="checkbox" v-model="allDone">
        </label>
        <span>{{ active }} / {{ all }}</span>
    </div>
</div>

<h2> 标签 ：使用双大括号语法 {{ title }} 来显示当前输入框中的文本。
<input> 标签 ：用于输入新的待办事项，使用 v-model 指令与 title 数据进行双向绑定，并监听 @keydown.enter 事件来调用 addTodo 方法。
<ul> 和 <li> 标签 ：遍历 todos 数组，每个元素对应一个待办事项，通过 v-for 指令生成列表项。每个列表项包含一个复选框和任务标题，复选框的状态由 todo.done 控制，任务标题根据是否完成改变样式。这里还使用了 :key 属性为每一项提供唯一的键值，这是 Vue 推荐的做法，有助于提高渲染性能。
<div> 标签：包含一个全选/取消全选的复选框，以及显示未完成任务数和总任务数。

2. CSS效果

xml 复制代码

<style>
        .done{
            color:gray;
            text-decoration: line-through;
        }
</style>

3. JS结构

3.1 vue2

kotlin 复制代码

const app = {
    data() {
        return {
            title: '',
            todos: [
                {title: 'eat', done: false},
                {title: 'sleep', done: false},
                {title: 'code', done: false}
            ],
        }
    },
    computed: {
        all() {
            return this.todos.length;
        },
        active() {
            return this.todos.filter(todo => !todo.done).length;
        },
        allDone: {
            get() {
                return this.active === 0;
            },
            set(val) {
                this.todos.forEach(todo => (todo.done = val));
            }
        }
    },
    methods: {
        addTodo() {
            if (this.title.trim()) {
                this.todos.push({title: this.title, done: false});
                this.title = '';
            }
        }
    }
};

Vue.createApp(app).mount('#app');

data 函数：返回一个对象，其中包含了组件的状态。这里定义了两个属性：
- title: 输入框的值。
- todos: 一个包含待办事项的对象数组，每个对象有两个属性：title（任务名称）和 done（布尔值，表示任务是否已完成）。
computed 属性：计算属性用于简化模板逻辑。这里有三个计算属性：
- all: 返回所有待办事项的数量。
- active: 计算并返回未完成的任务数量。
- allDone: 是一个 getter/setter 对象，用来处理全选/取消全选的功能。getter 用来判断是否所有任务都已完成；setter 用来设置所有任务的状态。
methods 对象：定义了组件的方法。这里只有一个方法：
- addTodo: 当按下回车键时被触发，检查输入框内容是否为空，如果不为空则将其添加到 todos 数组中，并清空输入框。
创建应用实例 ：最后，使用 Vue.createApp(app) 创建一个新的 Vue 应用实例，并通过 .mount('#app') 将其挂载到具有 id="app" 的 DOM 元素上。

3.2 vue3

ini 复制代码

const { createApp, ref, computed } = Vue;

createApp({
    setup() {
        const title = ref('');
        const todos = ref([
            { title: 'eat', done: false },
            { title: 'sleep', done: false },
            { title: 'code', done: false }
        ]);

        const all = computed(() => todos.value.length);
        const active = computed(() => todos.value.filter(todo => !todo.done).length);
        const allDone = computed({
            get: () => active.value === 0,
            set: (value) => {
                todos.value.forEach(todo => todo.done = value);
            }
        });

        function addTodo() {
            if (title.value.trim()) {
                todos.value.push({ title: title.value, done: false });
                title.value = '';
            }
        }

        return {
            title,
            todos,
            all,
            active,
            allDone,
            addTodo
        };
    }
}).mount('#app');

引入 Vue 3 的 API：
- 使用解构赋值从 Vue 中提取 createApp, ref, 和 computed 函数，以便更简洁地创建应用实例和定义响应式数据及计算属性。
创建 Vue 应用实例：
- 使用 createApp({...}) 创建一个新的 Vue 应用实例，并通过 .mount('#app') 将其挂载到具有 id="app" 的 DOM 元素上。
setup 函数：
- 这是 Composition API 的入口点，所有的逻辑都在这里定义。
- ref : 创建响应式的变量 title 和 todos。ref 返回的对象有一个 .value 属性，用来访问或修改它的值。
- computed : 定义计算属性 all, active, 和 allDone。all 计算总任务数；active 计算未完成的任务数；allDone 是一个 getter/setter 对象，用来处理全选/取消全选的功能。
- addTodo 方法 ：当按下回车键时被触发，检查输入框内容是否为空，如果不为空则将其添加到 todos 数组中，并清空输入框。
返回对象：
- setup 函数返回的对象决定了哪些数据和方法可以暴露给模板使用。在这里我们返回了 title, todos, all, active, allDone, 和 addTodo，因此它们可以在模板中直接引用。

4. vue2和vue3的主要区别

4.1 Vue 3 中的 Composition API

在上面的例子中，我们可以看到 Vue 3 引入了 Composition API。这是一套新的API，旨在解决Vue 2中 Options API 在处理复杂逻辑时遇到的问题。Composition API 提供了一种更灵活的方式来组织和重用逻辑，它允许开发者将相关的逻辑组合在一起，而不是分散到 data, methods, computed 等选项中。

Options API （Vue 2）：使用 data, methods, computed 和 watch 等选项来定义组件的行为。
Composition API （Vue 3）：通过 setup 函数引入，提供 ref, reactive, computed, watch 等函数来创建响应式数据、计算属性、监听器等，并且可以直接返回要暴露给模板的数据和方法。

4.2 全局 API 的变化

Vue 3 移除了部分全局 API，如 Vue.extend 和 Vue.component，并推荐使用 createApp 创建应用实例，以及使用 app.component 注册组件。

4.3 更小的体积和更快的速度

由于内部优化，Vue 3 比 Vue 2 具有更好的性能和更小的打包体积。例如，在上面的代码示例中，Vue 3 的脚本链接指向的是一个更轻量级的库版本。

5. 总结

总而言之，言而总之，Vue 3 不仅带来了性能上的提升，还为码农提供了更为强大的工具来构建现代化Web应用程序。尽管存在一些API的变化，但是这些改变都朝着更高效、更易于维护的方向发展。对于想要学习或迁移到 Vue 3 的码农来说，理解 Composition API 和其他新特性是至关重要的一步。

看完觉得对你有帮助的话不妨留下一个免费的赞吧