Vue设计模式，发布订阅，响应式原理（简略版）

抬头第一眼，是天

已于 2022-09-23 10:14:15 修改

阅读量550

点赞数 1

分类专栏： Vue2 文章标签： vue.js 设计模式前端

于 2022-09-14 12:13:33 首次发布

本文链接：https://blog.csdn.net/Mr_Ypp/article/details/126849893

版权

本文介绍了Vue.js的设计模式，重点讲解了Vue如何实现响应式原理，包括数据劫持的Object.defineProperty和Proxy方法。文章指出，Vue利用发布订阅者模式进行数据监听和更新，同时对比了两种数据劫持技术的优缺点。

摘要由CSDN通过智能技术生成

Vue

mvvm框架是什么？

mvvm框架（model-view-viewMode），本质是mvc框架的改进版，mvc框架一旦项目复杂度越来越高，代码量大，维护起来很难，尤其管理层，controller

就有了viewMOdel，有前端人员生成和维护的视图数据层，前端通过从后端获取到的model数据进行转换，封装成view层预期的数据，用来生成view层的视图数据模型

Vue设计模式

vue使用发布订阅者模式，在vue中使用observer和definereactive两个方法结合，对数据递归劫持，用watch这个类来进行监听订阅，dep用于解耦合，当数据变更后触发set方法，之后调用dep.notiify通知视图更新

发布订阅者模式

在这里插入图片描述

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>
<body>
    <script>
        /* 观察者 */
        class Watcher{
     
            constructor(){
     
                //用来存储事件类型和事件函数的一个对象
                // 进入超市首先推一个小推车
                this._message = {
     }
            }
            //消息订阅
            on(type,fn){
     
                // 想买方便面，我去方便面区域看看有没有想要买的牌子
                //往消息盒子当中存储事件类型与事件函数
                // 找到方便面区域了
                if(this._message[type]){
     
                    //第二次往后存储事件类型和事件函数
                    // 把康师傅放进小推车里
                    this._message[type].push(fn)
                }else{
     
                    //第一次存储事件类型与事件函数
                    this._message[type] = [fn]
                }