【愚公系列】《循序渐进Vue.js 3.x前端开发实践》009-Vue 模板与应用：小结与上机演练

🚀前言

基于 Vue 的模板语法深入探讨了 Vue 框架中的模板插值、模板指令等关键技术，并详细介绍了如何利用 Vue 实现组件的条件渲染和循环渲染。这些内容构成了Vue 框架的核心部分，仅仅掌握这些技术，便能在前端网页开发中显著提升效率。

🚀一、小结与上机演练

🔎1.Vue 是如何实现组件与数据间的绑定的?

Vue 通过响应式系统实现组件与数据之间的双向绑定。在 Vue 中，当数据发生变化时，组件会自动更新。其核心机制基于 “数据劫持” 和 “依赖追踪”。接下来，我们详细解析 Vue 是如何实现这一绑定的。

🦋1.1 Vue 的响应式系统

Vue 3 使用 Proxy 实现响应式数据绑定，而 Vue 2 使用了 Object.defineProperty 进行数据劫持。Vue 的响应式系统主要包括以下过程：

1. 数据劫持： Vue 将对象或数组的属性劫持（或代理），监听它们的变化。
2. 依赖追踪： 当模板中使用数据时，Vue 会记录这些数据与模板中的组件或 DOM 之间的依赖关系。
3. 自动更新： 当数据发生变化时，Vue 会自动触发重新渲染，更新与数据绑定的组件。

🦋1.2 数据绑定的两种模式

1. 单向绑定（One-Way Binding）：

   • 数据从组件的数据源传递到 DOM。
   • 使用 { {}} 模板语法或 v-bind 指令将数据绑定到视图。

   示例：

   <div>{
       { message }}</div>  <!-- message 值变化时，视图会自动更新 -->
   

2. 双向绑定（Two-Way Binding）：

   • Vue 通过 v-model 指令实现双向绑定。双向绑定意味着数据在组件与视图之间可以同步更新。

   示例：

   <input v-model="inputValue" />
   <p>当前输入：{
       { inputValue }}</p>
   

   • 当用户在输入框输入内容时，inputValue 会更新；反之，inputValue 的改变也会同步到输入框中。

🦋1.3 Vue 3 中的响应式实现

☀️1.3.1 使用 ref 创建响应式数据

ref 是 Vue 3 中用于创建基本类型数据的响应式容器。它会自动监听其值的变化，并触发组件的更新。

示例：

import {
    ref } from 'vue';

const counter = ref(0);
const increment = () => {
   
    counter.value++;
};

• 绑定数据：ref 返回一个对象，其值保存在 .value 属性中。
• 视图中使用：

  <div>{
      { counter }}</div>
  <button @click="increment">增加</button>
  

☀️1.3.2 使用 reactive 创建响应式对象

对于复杂对象，Vue 3 使用 reactive 将对象转换为响应式数据。

示例：

import {
    reactive } from 'vue';

const state = reactive({
   
    count: 0,
    message: 'Hello Vue'
});

• reactive 将整个对象包裹，使其内部的所有属性都变为响应式。

🦋1.4 响应式原理：依赖追踪与触发更新

1. 依赖追踪：

   • 当模板中使用响应式数据时，Vue 会将该数据与组件建立依赖关系。这个过程在 Vue 内部由 Dep 和 Watcher（Vue 2）或 effect（Vue 3）来管理。

2. 触发更新：

   • 当响应式数据发生变化时，Vue 会通过发布-订阅模式触发与该数据相关的组件更新。

   简单模拟实现：

   let activeEffect =