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]}}//发布消息// 结账emit(type,...rest){/* 1. 先看消息盒子里面有没有事件类型,没有就弹出一句话,请先订阅*/// 如果不买东西请你出去if(!this._message[type]) return alert("请先订阅消息")//遍历消息盒子,看事件类型对应的函数有没有相同的,有相同的,那么就触发// 收营员先把小推车里的东西一个一个倒出来this._message[type].forEach(item=>{//如果消息盒子里面的函数与我们传入进来的函数有一样的,那么触发这个函数// 倒出来的同时我们可以看看有没有不想买的，有没有想买的for(let i = 0 ; i < rest.length ; i++){// 我们传入进来的函数有一样的,那么触发这个函数// 如果是想买的就付款这个东西if(rest[i] === item){//触发这个函数item(i);}}})}//取消订阅// 从收银台装入自己的购物袋中off(type,fn){/* 1. 先看消息盒子里面有没有事件类型,没有就弹出一句话,请先订阅*/// 如果不买东西请出去if(!this._message[type]) return alert("请先订阅消息")//遍历所有的消息盒子得到的是消息盒子里面的对象的value就是每一个函数,如果其中有函数与我们传入进行的函数是一样的,那么删除这个函数// 还是一件一件看我们挑选好了的东西for(let i= 0 ; i< this._message[type].length ; i++){// item函数与我们传入进行的函数是一样的,那么删除这个函数// 如果这个东西是我已经付钱了，我就拿走if(this._message[type][i] === fn){this._message[type].splice(i,1)//解决数组塌陷i--}}}//清除订阅// 归还购物车clear(type){/* 1. 先看消息盒子里面有没有事件类型,没有就弹出一句话,请先订阅*/// 保安对你说 要是不买东西就出去if(!this._message[type]) return alert("请先订阅消息")//清除消息盒子里面的事件类型// 扔掉购物车delete this._message[type]}}//先建立两个函数function fn1(){console.log("我是函数1");}function fn2(){console.log("我是函数2");}let w = new Watcher();//消息订阅w.on("buy",fn1)w.on("buy",fn2)//发布消息w.emit("buy",fn1,fn2)//删除订阅w.off("buy",fn1)w.off("buy",fn2)//清除订阅w.clear("buy");console.log(w);</script>
</body>
</html>

Vue响应式原理：

数据劫持 Object.defineProperty(): 1. 只能监听对象(Object)的属性，不能监听数组的变化，无法触发push, pop, shift, unshift,splice, sort, reverse。 2. 必须遍历对象的每个属性。3. 只能劫持当前对象属性，如果想深度劫持，必须深层遍历嵌套的对象。

数据劫持 Proxy: 1. Proxy 可以直接监听对象而非属性。2. Proxy 可以直接监听数组的变化。3. Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是Object.defineProperty 不具备的。4. Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改。5. Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利。

<!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><div id="app"><input id="ipt" type="text"><h1 id="h1"></h1></div>
</body>
<script>// app理解成vue组件实例thisvar app = {}// 理解成你手动放在data选项上的数据var c = 0var name = '杨'// var data = {//   c : 0,//   name : '杨'// } 下面的逻辑就用for of 遍历Object.defineProperty(app, 'count', {get() {console.log('有人访问了count');return c},set(newVal) {c = newValconsole.log('有人修改了count');}})// 实现响应式底层原理，劫持name普通属性，将其变成一个响应式变量Object.defineProperty(app, 'name', {get() {console.log('有人访问了name');return name},set(newVal) {name = newValconsole.log('有人修改了name');// 当有人修改响应式变量时，我们通知Watcher去操作真实DOM更新视图Watcher('name')}})// 页面初始化操作(function init() {Watcher('name')// 初始化事件绑定document.getElementById('ipt').addEventListener('input', function(e) {// 给input表单绑定事件// 当表单的值发生变化app.name = e.target.value})})() // 初始化自执行// 依赖收集(用于记录DOM结构和响应式变量之间的一对一的关系):vue源码map结构var deepObj = {// h1: 'name',name: ['h1','ipt'],// name: []可以是数组，在多个dom节点}// 用于更新视图（背后是DOM操作） 根据依赖收集的记录，进行更新视图function Watcher(key) { // key 可以换成reactive// 把name这个响应式变量渲染到视图结构中去var idArr = deepObj[key]document.getElementById(idArr[0]).innerText = app[key]document.getElementById(idArr[1]).value = app[key]}init()</script>
</html>

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

VUE源码解析-响应式原理的实现
前言相信vue学习者都会发现,vue使用起来上手非常方便,例如双向绑定机制,让我们实现视图.数据层的快速同步,但双向绑定机制实现的核心数据响应的原理是怎么样的呢,接下来让我们开始介绍: functi ...
Vue响应式原理探究之“发布-订阅”模式
前言在面试题中经常会出现与"发布订阅"模式相关的题目,比如考察我们对Vue响应式的理解,也会有题目直接考验我们对"发布订阅"模式或者观察者模式的理解,甚至还会 ...
Vue2.0 —— 由设计模式切入，实现响应式原理
Vue2.0 -- 由设计模式切入,实现响应式原理 <工欲善其事,必先利其器> 既然点进来了,麻烦你看下去,希望你有不一样的收获. 大家好,我是vk,好久不见,今天我们一起来盘一盘关于 V ...
Vue响应式原理的简单模型
1.前言最近在梳理vue响应式的原理,有一些心得,值得写一篇博客出来看看. 其实之前也尝试过了解vue响应式的原理,毕竟现在面试看你用的是vue的话,基本上都会问你几句vue响应式的原理.以往学习这 ...
Vue响应式原理（看这一篇就够了）
你肯定听说过Object.denfineProperty或是Proxy\reflect,这的确是在VUE响应式原理中起重要作用的一部分代码,但这远远不能代表整个流程的精妙.上图: 不懂没关系,请往下看 ...
Vue源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
Vue.js 响应式原理
文章目录 Vue 数据响应式原理 `Object.defineProperty()` 数据响应式原理 `Proxy` 相关设计模式观察者模式发布-订阅模式 Vue 响应式原理模拟 Vue 类 Ob ...
Vue源码解读一：Vue数据响应式原理
这方面的文章很多,但是我感觉很多写的比较抽象,本文会通过举例更详细的解释.(此文面向的Vue新手们,如果你是个大牛,看到这篇文章就可以点个赞,关掉页面了.)通过阅读这篇文章,你将了解到: 1.Vue数 ...
模拟Vue响应式原理
模拟Vue响应式原理设计模式发布订阅模式我们假定,存在一个"信号中心",某个任务执行完成,就向信号中心"发布"(publish)一个信号,其他任务可以向 ...

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

Vue

Vue设计模式

发布订阅者模式

Vue响应式原理：

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

最新文章

热门文章