Vue2 和 Vue3 中监视数据的区别

• Vue2 Object.defineProperty 劫持数据针对于每个属性去劫持, 如果数据复杂, 需要递归劫持, 成本高, 效率低对于数组数据的劫持/监视, 有问题 ==>> $set
• Vue3 Proxyproxy对于整个对象数据的劫持 对象内部的任意属性发生变化 都会经过外层的proxy, 无需递归, 效率高proxy对于数组数据的更新也没问题
• 底层代码实现：

  let data = {
          name: "lis",
          age: 20,
          sex: "男"
      }
  //  vue2.0实现  使用Object.defineProperty进行数据劫持
      for(let key in data){
          let temp = data[key]
          Object.defineProperty(data, data[key], {
              get(){
                  return temp
              },
              set(value){
                  temp = value
              }
          })
      }
  // vue3.0实现 使用Proxy 进行数据的代理
      let newData = new Proxy(data, {
          get(target, key){
              return target[key]
          },
          set(target, key, value){
              target[key] = value
          }
          // vue3中拦截对象的删除操作并触发
          deleteProperty(target, key) {
            const result = Reflect.deleteProperty(target, key);
            // 当属性被删除时，触发更新
            trigger(target, key);
          }
          })
  

Vue的响应式系统=>vue的设计模式之观察者模式(一对多的设计模式)

响应式: 数据变化了, 会通知到所有用到该数据的视图自动更新

观察者模式 目的在于 需要通知对应的watcher进行响应; 依赖收集(找到数据的依赖者)

一上来vue会解析渲染, 会进行依赖收集(找到数据的watcher), 收集到一个大的数据中,当数据变化时, Object.defineProperty监视到数据变化了, 就会通知到你刚刚收集的watcher们进行响应(派发更新)

watcher也有分类: 侦听器watcher > 计算属性watcher > 渲染watcher

举个例子：在一个拍卖会上，拍买一个珍品（页面的数据），A和B（A和B便是watcher）同时想要这件珍品(同时需要修改这个数据)，那么他们会去关注这个珍品的价格变化（关注数据的变化），如果变化了，而且还在A和B的接受范围内，那么，他就会重新去叫价，从而更改这件珍品的起拍价（更改数据，实现响应式原理）

vue的设计模式之工厂模式

工厂模式

工厂模式（Factory Pattern）是一种创建对象的设计模式，它通常用于在不指定具体类的情况下创建对象。这种模式通常用于处理对象创建的复杂性，使得代码更具扩展性和可维护性。工厂模式通常会涉及到接口或抽象类，通过一个统一的接口来创建不同类型的对象。

工厂模式的分类：

• 简单工厂模式：一个工厂类根据输入决定要实例化哪一个类。
• 工厂方法模式：定义一个接口或抽象类，由子类决定实例化哪一个类。工厂方法将实例化延迟到子类。
• 抽象工厂模式：提供一个接口，用于创建相关或依赖对象的家族，而无需指定具体类。

特点：

• 更适合复杂的对象创建场景。
• 通过抽象和接口来定义对象创建的框架，提供更大的灵活性。
• 通常涉及到多个类和继承结构。

工厂函数

工厂函数是一个普通的函数，它返回一个对象。这种函数通常被用来动态生成对象或组件。工厂函数并没有严格的设计模式规则，它只是一个创建对象的函数，可以根据传入的参数返回不同类型或配置的对象。

特点：

• 通常用于简单地封装对象创建的逻辑。(动态生成对象：工厂函数通常会根据传入的参数动态生成对象或实例。)
• 可以根据传入的参数创建不同的对象实例。(返回新实例：每次调用工厂函数时，通常会返回一个新的实例，而不是复用现有的实例。)
• 不涉及复杂的设计模式结构。

  // 常见的例子
  vue.creatApp()
  axios.create()
  

vue的设计模式之单例模式

概念：单例模式确保一个类只有一个实例，并提供一个全局访问点。

在 Vue 中的应用

• Vuex 状态管理库使用单例模式来管理全局的应用状态。整个应用只有一个 Vuex Store 实例，所有组件都共享这个实例。

vue的设计模式之策略模式

概念：策略模式定义了一系列算法，并将每个算法封装起来，使得它们可以相互替换。这种模式使得算法可以独立于使用它的客户端而变化。

在 Vue 中的应用

• Vue 的指令系统可以看作是策略模式的一个应用。不同的指令 (v-if, v-for, v-bind 等) 是不同的策略，它们分别对 DOM 的更新方式进行操作。

vue的设计模式之装饰器模式

概念：装饰器模式允许向一个对象动态添加职责。它通过创建一个装饰对象来包装真实对象，从而增加功能。

在 Vue 中的应用

• Vue 的指令（如 v-bind）和组件插槽（Slots）可以看作装饰器模式的应用，它们可以为组件或元素动态添加功能或修饰。
• Vue 3 中的 Composition API 可以通过组合函数动态地增强组件的功能，类似装饰器模式。

vue的设计模式之适配器模式

概念：适配器模式将一个类的接口转换成客户端希望的另一个接口，适配器让原本接口不兼容的类可以一起工作。

在 Vue 中的应用

• Vue 的插件系统可以看作是适配器模式的一个应用。通过插件，Vue 可以扩展其功能，而不需要改变现有的接口和架构。

vue的设计模式之代理模式

概念：代理模式为其他对象提供一种代理，以控制对这个对象的访问。

在 Vue 中的应用

• Vue 3 的响应式系统主要依赖于 JavaScript 的 Proxy 对象来实现。当访问或修改响应式数据时，Proxy 会拦截这些操作，从而实现依赖追踪和响应式更新。

vue的设计模式之中介者模式

概念：中介者模式定义一个中介者对象来封装一系列对象之间的交互关系，使对象之间不需要相互引用，从而实现松耦合。

在 Vue 中的应用

• Vuex 的中央状态管理就是中介者模式的一个例子。Vuex Store 作为一个中介者，管理各个组件之间的数据流动，避免了组件之间直接通信。

vue的设计模式之模板方法模式

概念：模板方法模式在一个方法中定义一个算法的骨架，而将一些步骤延迟到子类中实现。模板方法使得子类可以不改变算法结构即可重新定义算法的某些步骤。

在 Vue 中的应用

• Vue 组件的生命周期钩子（如 created, mounted 等）可以看作模板方法模式的一个应用。Vue 提供了一系列钩子（算法骨架），开发者可以通过覆盖这些钩子来定义组件的行为。