📌Vue专栏 专栏正在持续更新中，案例的原理图解析、各种模块分析💖这里都有哦，同时也欢迎大家订阅专栏，获取更多详细信息哦✊✊✊
✨个人主页：零小唬的博客主页
🥂欢迎大家 👍点赞 📨评论 🔔收藏
✨作者简介：20级计算机专业学生一枚，来自宁夏，想从事前端开发，目前还在努力学习并记录博客中🧸
🎀本系列专栏: Vue专栏
💕希望本文对你在学习Vue或者面试vue相关的岗位的过程中有所帮助，如有不足请指正一起学习，一起进步🥇
⛪座右铭：只要你还愿意努力，世界一定会给你惊喜

---

帮助你快速找到你要的题目答案

• • 你对vue框架的理解？
  • 计算属性和侦听器
  • Vue.js中的虚拟DOM
  • 模板编译
  • 组件
  • 生命周期钩子
  • Vue.js中的事件处理
  • Vue.js中的指令
  • 简述MVVM
  • v-for中key的作用
  • vue组件的通信方式
  • 路由传参
  • 路由的两种模式 hash与history
  • 双向绑定实现原理

你对vue框架的理解？

  Vue.js 是一款流行且易用的渐进式JavaScript框架，用于构建复杂的用户界面和单页面应用程序（SPA）。Vue.js 的特点包括：轻量级、响应式和可组件化的设计、优秀的性能和渲染速度、容易学习和使用、灵活性和可扩展性。
  Vue.js 的核心是数据驱动，采用了基于依赖追踪的观察者模式来实现响应式的数据绑定。这意味着当视图中的数据发生变化时，Vue.js能够自动检测并更新相关的视图组件。Vue.js还提供了丰富的指令和组件库，包括v-if、v-for、v-bind、v-on等常用指令，以及包括Vue Router和Vuex在内的常用插件，使得应用程序的开发更加简单和高效。
  Vue.js还支持通过插件方式来拓展其功能及适配第三方库，并配合Webpack、Babel等流行工具形成了完整的生态系统，使得应用程序开发更加可靠和高效。
  总之，Vue.js是一款功能强大的框架，提供了一系列优秀的特性和工具，可以帮助开发人员快速地构建出高效、响应式和可组件化的Web应用程序。

---

计算属性和侦听器

  在Vue.js中，计算属性和侦听器都是用来监听数据变化并做出相应操作的机制，但它们的使用场景和实现方式有所不同。
  计算属性是一个在Vue实例中声明的属性，可以通过现有数据来计算得到。计算属性是基于它的相关依赖缓存，只有相关依赖发生改变时，才会重新计算。可以使用计算属性来计算复杂的表达式，同时避免在模板中编写复杂的逻辑。计算属性可以用在模板中的插值表达式、指令和计算属性中，使得代码更加优雅和易于维护。

var vm = new Vue({
  data: {
    message: 'Hello Vue.js',
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('')
    }
  }
})

  侦听器是通过Watcher对象来实现的，可以监听一个或多个数据的变化，并在变化时触发回调函数。侦听器适用于不需要计算结果，但需要在数据变化时执行异步或开销较大的操作的场景。通过watch选项来声明侦听器，并在该选项中指定回调函数，Vue实例数据的变化将会触发该回调函数的执行。

var vm = new Vue({
  data: {
    message: 'Hello Vue.js',
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('数据已经变化了')
    }
  }
})

  总之，计算属性和侦听器都是用来监听数据变化的机制，计算属性适用于需要计算复杂逻辑的场景，而侦听器适用于需要执行异步或开销较大的操作的场景。在实现方式上，计算属性基于相关的依赖缓存，实现比较简单；而侦听器需要通过Watcher对象来实现，实现复杂度相对较高。

---

Vue.js中的虚拟DOM

  Vue.js 中的虚拟 DOM 是指一种抽象的、轻量级的 DOM 对象结构，它通过 JavaScript 对象来描述真实的 DOM 元素。虚拟 DOM 可以在页面重新渲染时高效地计算和比较差异，并只更新有变化的部分，从而提高页面渲染的性能。
  在 Vue.js 中，当数据变化时，Vue.js 内部会通过模板编译器将模板转换为渲染函数，在这个过程中会生成虚拟 DOM，它是一个JS对象树形结构，包含了整个视图的所有节点、属性和事件监听器等信息。当数据发生变化时，Vue.js 会重新计算虚拟 DOM，并与之前的虚拟 DOM 进行比较，找到需要更新的部分，然后更新它们。
  与直接操作真实 DOM 相比，虚拟 DOM 具有较低的开销和更快的渲染速度，因为在处理差异时它只更新必要的部分，避免了整个页面的重新渲染。同时，Vue.js 也提供了一些优化虚拟 DOM 性能的策略，例如组件缓存、异步更新等，使得应用程序的性能更加优秀。
  总之，Vue.js 中的虚拟 DOM 是一种抽象的、轻量级的 DOM 对象结构，用于快速计算和比较真实 DOM 的差异，从而提高应用程序的渲染性能。

---

模板编译

  模板编译是 Vue.js 中将模板字符串（template）编译成渲染函数的过程。在 Vue.js 底层实现中，模板编译是通过将模板字符串转换为虚拟 DOM，并最终生成可执行的渲染函数的过程。
  在 Vue.js 中，我们可以通过两种方式来定义模板：使用字符串模板或使用单文件组件。其中，字符串模板是一种直接写在 JavaScript 中的 HTML，而单文件组件则是一个以 .vue 后缀结尾、包含了组件的 HTML 模板、JavaScript 代码和 CSS 样式的文件。
  无论使用哪种方式，Vue.js 底层都会将模板编译成渲染函数。在编译过程中，Vue.js 内部会先将模板字符串转换成 AST（抽象语法树），然后再根据 AST 生成虚拟 DOM，最终生成可执行的渲染函数。
  生成的渲染函数是一个返回虚拟 DOM 的函数，它包含了一些性能优化的逻辑，例如缓存、异步更新等。每当组件重新渲染时，Vue.js 会重新调用渲染函数来生成新的虚拟 DOM，并将它与旧的虚拟 DOM 进行比较，找到需要更新的部分。
  总之，模板编译是 Vue.js 中将模板字符串编译为渲染函数的过程，通过编译可以将模板转换成虚拟 DOM 以及渲染函数，从而提高应用程序的性能和渲染速度。

---

组件

  Vue.js 是一个流行的基于组件化的前端 JavaScript 框架，因其简单易用、高效灵活、数据驱动等特点受到广泛的欢迎。组件化是 Vue.js 的核心思想之一，它允许将应用程序划分为独立、可重用的组件，从而更好地组织代码和管理状态，增强可维护性和可重用性。
   在Vue.js 中，组件是一个独立的、可重用的模块，可以包含 HTML 模板、CSS 样式和 JavaScript 代码等元素。组件可以是嵌套的，即一个组件可以包含其他组件。
  定义一个 Vue.js 组件的方式很简单，只需使用 Vue.component() 方法即可，比如：

Vue.component('hello-world', {
  template: '<div>Hello World!</div>'})

  上述代码定义了一个名为 “hello-world” 的组件，其渲染内容是一个简单的 “Hello World!” 字符串。这个组件可以像其他 HTML 元素一样使用，比如：

<hello-world></hello-world>

  在上述代码中，我们使用了自定义的 “hello-world” 标签来渲染这个组件。当 Vue.js 解析模板时，它会自动替换这个标签为我们定义的模板内容。
  当然，Vue.js 组件支持更多的功能和选项，例如组件的 props 属性、事件系统、生命周期钩子等等，这些让开发者可以更加方便灵活地使用组件。总的来说，Vue.js 的组件化使得前端应用程序的架构更加灵活易维护，也是 Vue.js 成为流行的前端框架的一个重要原因之一。

---

生命周期钩子

  Vue.js 生命周期钩子指的是 Vue.js 实例在创建、更新和销毁时，会自动调用一些特定的函数。这些函数称为“生命周期钩子函数”，常用来做一些与组件实例相关的操作，例如初始化数据、操作DOM元素、调用API等。
Vue.js 生命周期钩子函数可以分为以下三类：

• 创建期钩子函数：在 Vue.js 实例创建时，调用的钩子函数。这些函数主要用于初始化组件状态、事件监听器、获取数据等操作。常见的创建期钩子函数包括 beforeCreate、created

• 更新期钩子函数：在 Vue.js 实例更新时，调用的钩子函数。这些函数主要用于处理数据更新、更新DOM、更新组件状态等操作。常见的更新期钩子函数包括 beforeUpdate、updated

• 销毁期钩子函数：在 Vue.js 实例销毁时，调用的钩子函数。这些函数主要用于清理组件状态、事件监听器、定时器等资源。常见的销毁期钩子函数包括 beforeDestroy、destroyed

下面是常见的生命周期钩子函数以及它们的执行顺序：

• beforeCreate：实例被创建之前调用
• created：实例被创建之后调用
• beforeMount：模板编译之后，挂载元素之前调用
• mounted：模板编译之后，挂载元素之后调用
• beforeUpdate：数据更新之前调用
• updated：数据更新之后调用
• activated：keep-alive 组件激活时调用
• deactivated：keep-alive 组件停用时调用
• beforeDestroy：实例销毁之前调用
• destroyed：实例销毁之后调用

  了解生命周期钩子函数的执行顺序有助于开发者更好地理解 Vue.js 组件的运行机制，并且可以在适当的时候调用相应的钩子函数来实现目标。

---

Vue.js中的事件处理

  在Vue.js中，事件处理和原生JavaScript中的事件处理非常相似，但有一些重要的区别。
  Vue.js中的事件处理遵循 “v-on” 的指令格式，可以将一个自定义的事件绑定到任何DOM元素上，从而触发相应的事件处理函数。具体来说，可以使用v-on指令，将事件名作为参数，将事件处理函数作为值，绑定到指令所在的DOM元素上。

示例：

<div v-on:click="handleClick">Click me</div>

  在上述示例中，“v-on:click”指令绑定在“div”元素上，表示绑定一个”click“事件，并将事件处理函数”handleClick“作为其值。这样，当用户点击该元素时，Vue.js将自动调用”handleClick“函数进行相关的处理。
  在Vue.js中，还可以使用 “@” 符号的缩写来替代 “v-on:”前缀，使得代码更加简洁和易于阅读。例如可以使用”@click“来代替 ”v-on:click“。
另外，Vue.js还提供了一些常见的语法糖来处理事件，例如：

• .stop：阻止事件冒泡
• .prevent：阻止事件默认行为
• .capture：事件捕获
• .self：事件只在当前元素本身触发
• .once：事件只触发一次

<!-- 阻止冒泡 -->
<div v-on:click.stop="handleClick">Click me</div>

<!-- 阻止默认事件 -->
<a v-on:click.prevent="handleClick" href="#">Click me</a>

<!-- 事件捕获 -->
<div v-on:click.capture="handleClick">Click me</div>

<!-- 只在当前元素触发 -->
<div v-on:click.self="handleClick">Click me</div>

<!-- 只触发一次 -->
<button v-on:click.once="handleClick">Click me</button>

  总之，Vue.js中的事件处理机制非常灵活和易于使用，提供了许多方便的语法糖和选项来处理事件，并且支持绑定自定义事件以及在不同的生命周期中进行事件处理。这些功能及其灵活性使得事件处理在Vue.js中得到了很好的支持和应用。

---

Vue.js中的指令

  在 Vue.js 中指令是一种特殊的语法糖，用来扩展模板的功能。指令通过 Vue.js 模板中的指令标记（directive markers）绑定到 HTML 标签上，可以用来绑定数据、渲染条件、循环迭代等。
  指令的主要作用是在 Vue.js 模板中实现数据绑定，方便地将页面元素和数据关联起来，并使元素随着数据的变化而自动更新。常见的指令包括：

• v-bind: 数据绑定指令。它可以将 Vue 实例中的数据绑定到 HTML 元素的属性上。例如：

<img v-bind:src="imageSrc">

• v-model: 双向数据绑定指令。它允许将表单控件和 Vue 实例中的属性双向绑定。例如：

<input v-model="message" type="text">

• v-if、v-else-if、v-else: 条件渲染指令。它们可以根据条件渲染或隐藏 HTML 元素。例如：

<div v-if="isLoggedIn">Welcome back!</div>
<div v-else>Please log in to continue.</div>

• v-for: 循环渲染指令。它可以将数据中的每一个元素展示出来并使用它来渲染元素。例如：

<ul>
  <li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>

• v-show: 条件渲染指令。与 v-if 指令不同，它不会从 DOM 中移除元素，而是通过 CSS 控制其显示/隐藏。例如：

<div v-show="show">This element is always in the DOM, but hidden by CSS.</div>

  总之，指令是 Vue.js 模板语言中的重要组成部分，通过指令可以实现数据绑定、条件渲染、循环迭代等功能，使 Vue.js 适合用于构建复杂的单页应用程序。

---

简述MVVM

  MVVM 是一种用于设计 GUI 应用程序的软件架构模式。

MVVM 模式由三个组件构成：

• Model（模型）：代表数据和业务逻辑。
• View（视图）：代表用户界面，通常使用 XML 或 HTML 进行定义。它们是可见的部分，并且响应用户输入。
• ViewModel（视图模型）：充当视图和模型之间的协调器和通信者，将模型转换为视图可用的数据，同时将视图中的用户操作事件转换为模型可用的操作请求。

  在 MVVM 模式中，视图和模型之间没有直接的通信，它们通过 ViewModel 进行通信。ViewModel 对视图进行绑定，使视图能够显示模型的数据，并通知模型响应视图的用户操作。也就是说，ViewModel 将视图和模型解耦，允许它们在不影响彼此的情况下进行独立的开发和修改。
  Vue.js 是一个采用 MVVM 模式的 JavaScript 框架，它提供了一个响应式的数据绑定系统，并通过一个专门的视图组件（Vue 组件）来实现视图和 ViewModel 的绑定。因此，Vue.js 中的组件可以看作是 MVVM 模式中的 ViewModel，Vue.js 的数据绑定系统就是实现 ViewModel 和视图之间绑定的关键。
  总之，MVVM 是一种软件架构模式，它将应用程序分解为三个组件：Model、View 和 ViewModel。在 MVVM 模式中，ViewModel 充当了视图和模型之间的通信者和协调器，并将它们解耦，并让数据自动响应视图的变化。Vue.js 框架采用了 MVVM 模式，并通过响应式数据绑定系统实现 ViewModel 和视图之间的绑定。

---

v-for中key的作用

  在 Vue.js 中使用 v-for 指令循环渲染数组或对象时，通常需要为每个被渲染出的元素添加一个唯一的 key 属性，以便 Vue.js 能够高效地跟踪每个元素的状态变化。

key 属性的作用主要有以下两个方面：

• 提高渲染性能：在循环渲染数组或对象时，Vue.js 内部会尽可能复用已经渲染出的元素。如果没有为每个元素提供唯一的 key，那么
  Vue.js 将会以一种不可预测的方式重复利用已经存在的元素，导致性能下降。
• 检测变化：为每个元素提供唯一的 key，可以让 Vue.js 更容易地检测到哪些元素被添加、修改或删除了，从而更好地管理渲染的状态。

  key 可以是任何基本类型数据，例如字符串或数字。在使用 key 时，需要确保它们在循环范围内是唯一的。

示例代码：

<ul>
  <li v-for="(item, index) in items" 
      :key="item.id">{{ item.name }}</li>
</ul>

  在上述代码中，我们使用了一个唯一的 id 属性作为每个元素的 key，这样就能确保在循环中每个元素都是唯一的，同时还能提高渲染性能和检测变化的能力。
  总之， key 属性在 Vue.js 的 v-for 指令中扮演了非常重要的角色，它可以提高渲染性能并帮助 Vue.js 更好地管理渲染状态，同时也能帮助开发者更好地理解和维护代码。

---

vue组件的通信方式

  Vue.js 组件的通信是一个非常重要的话题。组件通信是指在多个组件之间传递数据或事件的能力。Vue.js 提供了多种组件通信的方式，常用的包括：

• Props 和 $emit：父组件可以通过 props 属性将数据传递给子组件，而子组件可以通过 $emit 方法向父组件发送事件。这种方式通常用于父-子组件之间的通信。

<!-- 父组件 -->
<template>
  <child-component :message="parentMessage" @send="handleSend"></child-component>
</template>
<script>
  export default {
    data() {
      return {
        parentMessage: 'Hello from parent'
      }
    },
    methods: {
      handleSend(message) {
        console.log(message)
      }
    }
  }
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">Send message to parent</button>
  </div>
</template>
<script>
  export default {
    props: ['message'],
    methods: {
      sendMessage() {
        this.$emit('send', 'Hello from child')
      }
    }
  }
</script>

• $parent 和 $children：父组件通过 $children 属性访问子组件，而子组件通过 $parent 属性访问父组件。这种方式通常用于父-子组件之间的通信。

<!-- 父组件 -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    components: {
      ChildComponent
    },
    mounted() {
      console.log(this.$children[0].message)
      this.$children[0].sendMessage()
    }
  }
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        message: 'Hello from child'
      }
    },
    methods: {
      sendMessage() {
        console.log(this.$parent.message)
      }
    }
  }
</script>

• $refs：父组件通过 $refs 属性访问子组件的实例，从而操作子组件的属性和方法。这种方式通常用于父-子组件之间的通信。

<!-- 父组件 -->
<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="invokeChildMethod">Invoke child method</button>
  </div>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    components: {
      ChildComponent
    },
    methods: {
      invokeChildMethod() {
        this.$refs.child.showMessage('Hello from parent')
      }
    }
  }
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        message: ''
      }
    },
    methods: {
      showMessage(message) {
        this.message = message
      }
    }
  }
</script>

• EventBus：通过自定义事件实现任意组件之间的通信，接收方通过 $on 监听事件，发送方通过 $emit 触发事件。这种方式通常用于任意组件之间的通信。

<!-- 组件 A -->
<template>
  <div>
    <button @click="emitEvent">Send event</button>
  </div>
</template>
<script>
  import EventBus from './EventBus.js'
  export default {
    methods: {
      emitEvent() {
        EventBus.$emit('custom-event', 'Hello from component A')
      }
    }
  }
</script>

<!-- 组件 B -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
  import EventBus from './EventBus.js'
  export default {
    data() {
      return {
        message: ''
      }
    },
    created() {
      EventBus.$on('custom-event', message => {
        this.message = message
      })
    }
  }
</script>

  总之，以上是常见的 Vue.js 组件通信方式。对于不同场景，我们需要选择不同的通信方式来实现组件之间的数据传递和事件触发。同时，也要注意避免过于复杂的通信方式和耦合度过高的组件设计。

---

路由传参

  在 Vue.js 中，路由传参是指通过 URL 参数或路由属性在不同的路由组件之间传递数据。Vue.js 提供了多种方式进行路由传参，常用的包括以下几种：

• URL 参数：可以通过 URL 中的参数来传递数据。在路由配置中，通过在 path 中使用“:”来定义 URL 参数，然后在组件中通过 $route.params 来获取参数值。

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

// 组件中获取参数值
export default {
  computed: {
    userId() {
      return this.$route.params.id
    }
  }
}

• 查询参数：可以通过查询参数在不同的路由组件之间传递数据。在组件中，可以通过 $route.query 属性来访问查询参数。

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: User
    }
  ]
})

// 组件中获取查询参数值
export default {
  computed: {
    query() {
      return this.$route.query
    }
  }
}

• 路由属性传递：可以通过路由属性来进行组件间传值。在路由配置中，可以通过 props 属性将路由属性传递到组件中。

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: User,
      props: {
        name: 'John Doe'
      }
    }
  ]
})

// 组件中获取路由属性
export default {
  props: ['name']
}

• 状态管理模式：可以通过状态管理模式如 Vuex 在组件间传递数据，使得不同的组件可以共享同一个状态。

// 状态管理模式
const store = new Vuex.Store({
  state: {
    message: 'Hello from state'
  }
})

// 组件中获取状态
export default {
  computed: {
    message() {
      return this.$store.state.message
    }
  }
}

  总之，在 Vue.js 中，可以使用不同的方式在路由组件之间传递数据，不同的方式适用于不同的场景。我们可以根据需要选择合适的方式来实现路由传参。

---

路由的两种模式 hash与history

  Vue.js 路由有两种模式：hash 模式（缺省）和 history 模式。它们之间的区别在于 URL 的格式和浏览器历史记录。

Hash 模式
  在 hash 模式下，URL 中的 # 后面的部分被称为“哈希”，用于标记锚点位置。而在 Vue.js 路由中，hash 被用于标记路由路径，例如：http://example.com/#/user。
  Vue.js 的 hash 模式是运用了浏览器自身的特性实现的。在这种模式下，路由的改变不会引起浏览器的刷新，而是通过监测 hashchange 事件来实现切换页面内容，从而达到无刷新的效果。

优点：兼容性好，在各种浏览器中都可以正常使用。
缺点：URL 中包含 #，不太美观；同时，搜索引擎对 URL 中的 # 后面的部分不会进行解析，因此这种模式不利于 SEO （搜索引擎优化）。

History 模式
  在 history 模式下，URL 中不包含 #，例如：http://example.com/user/。
Vue.js 的 history 模式使用 HTML5 History API 来实现。在这种模式下，向服务器发送一个 HTTP 请求，服务器返回对应的资源，这个过程不需要刷新页面。同时，通过 pushState 和 replaceState 方法可以在浏览器历史记录中添加和修改记录，从而实现前端页面无刷新的路由切换。

优点：URL 更加美观，并且更符合传统 Web 应用的 URL 风格；搜索引擎可以正常解析这种 URL，利于 SEO。
缺点：需要服务器端的支持；兼容性相对于 hash 模式较差，在一些较老的浏览器中可能无法正常使用。

总结：
  在实际应用中，可以根据需要来选择使用 hash 模式还是 history 模式。如果不需要考虑 SEO 或需要兼容性更好，可以选择 hash 模式；如果需要更美观的 URL 和良好的 SEO，可以选择 history 模式。

---

双向绑定实现原理

  当一个Vue实例创建时，Vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher重新计算，从而致使它关联的组件得以更新。

具体的实现过程如下：

• 数据劫持：当 Vue.js 创建组件实例时，它会遍历组件对象上的所有属性，将其中的响应式数据转换为“响应式对象”。通过 Object.defineProperty API 来实现数据劫持，定义 get/set 方法来拦截属性的读取操作和赋值操作，从而实现对数据的跟踪和劫持。在 get 中进行依赖收集，在 set 中通过通知 Dep 更新 Watcher 依赖进行响应式更新。
• 编译模板：Vue.js 编译器将模板解析成抽象语法树（AST），遍历 AST，根据指令、插值符号等语法进行相关的数据绑定。对于双向绑定语法 v-model，在编译阶段会将其转化为一个语法糖，即将其绑定的值和 input 事件双向绑定起来。
• Watcher：在 Vue.js 中，Watcher 是监听器对象，它会在数据劫持后进行依赖收集，即收集所有使用到该数据的节点，以便在数据变化时即时执行响应式更新操作。同时，Watcher 对象也会在数据变化时触发回调函数，通知其他组件需要更新相关的视图。
• 发布-订阅模式：Vue.js 中的数据绑定采用了发布-订阅模式，即通过 Dep 对象作为订阅器，Watcher 对象作为订阅者，实现对数据和视图之间的解耦。Dep 对象中维护了一个订阅列表，存储了所有订阅者 Watcher，当数据发生变化时，Dep 负责向所有订阅者 Watcher 发布更新通知，订阅者 Watcher 则负责执行响应式更新操作。

---

🎉记录是为了不停的思考，创作更是为了更好的思考，有人说过：2023年以后的中国市场将永远属于长期主义者，bug是改不完的，只能说这次遇到了希望下次不会在出现同样的bug就行，如果你觉得对您有帮助，欢迎一起交流学习，本人也是一名很菜的大三学生，编程界的小白。