关于vue.js:vueMVVM双向绑定

0次阅读

共计 3055 个字符，预计需要花费 8 分钟才能阅读完成。

MVC
MVP
MVVM

一个利用分为三局部

模型 (Model)：数据保留

应用程序的 数据 、管制与批改这些数据的 业务规定
Model 扭转时：告诉 View，为 View 提供查问 Model 相干状态的能力，为 Controller 提供拜访封装在 Model 外部的应用程序性能的能力。
视图 (View)：用户界面

组织 Model 的内容
Model 扭转时：View 负责保护数据体现的一致性，同时 View 将用户的申请告诉 Controller
控制器 (Controller)：业务逻辑

应用程序的行为
解释来自 View 的用户申请，把申请映射为行为，再由 Model 实现这些行为。

结构图：

View 传送指令到 Controller
Controller 实现业务逻辑后，要求 Model 扭转状态
Model 将新的数据发送到 View，用户失去反馈

承受指令的形式
由 View 承受指令，传递给 Controller
Controller 间接承受指令

模型(Model)：提供数据
视图(View)：用户界面
示意器(Presenter)：逻辑的解决

结构图

View 与 Model无分割，都通过 Presenter 传递
View 中 不部署任何业务逻辑 – 被动视图
所有逻辑都部署在 Presenter

与 MVC 的区别
View 不能间接从 Model 中读取数据

基本上与 MVP 模式统一

模型(Model)：保留数据
视图(View)：用户界面
数据驱动(View-Model)：业务逻辑

VM 负责转换 Model 中的数据对象

结构图

操作 View 时，ViewModel 感知变动，告诉 Model 产生相应的变动，若 Model 扭转时，ViewModel 感知变动，告诉 View 进行更新
ViewModel 与 View 双向数据绑定，Model 通过接口申请数据交互，承前启后。

Vue2：Object.defineProperty()
Vue3：Proxy 代理

Object.defineProperty(obj,prop,description)

原理简析，不做依赖收集

/**
 * 对 Object.defineProperty()进行封装
 */
function defineReactive(obj, key, value) {
    // 递归 - 对象的属性仍是对象
    observe(value);
    // 变动侦测
    Object.defineProperty(obj, key, {get() {return value;},
        set(newVal) {if (newVal !== value) {updateView();
                value = newVal;
                observe(newVal)
            }
        }
    })
}

/**
 * 对一个对象所有属性的变动侦测
 */
function observe(target) {
    // 非对象，间接返回
    if (typeof target !== 'object') {return target;}
    // 将每个属性转换为 getter 和 setter 模式
    for (let key in target) {defineReactive(target, key, target[key])
    }
}
// 模仿更新视图的办法
function updateView() {console.log("更新视图");
}

通过间接调用 observe 侦测对象属性的变动

存在的问题

性能较差
对象上新增属性无奈侦测
扭转数组的 length 属性无奈被侦测

Proxy 是一种能够拦挡并扭转底层 JavaScript 引擎操作的包装器，性能更优异
数组能够像对象一样触发 get 与 set
【js】代理与反射(Proxy/Reflect)
【阮一峰】ES6 规范 -Proxy

原理简析，不做依赖收集

根本流程

cosnt o = {name:"张三"}
const proxy = new Proxy(o,{get(target,key,receiver){console.log("读取属性值")
    },
    set(target,key,value,receiver){console.log("设置属性值")
    },
    deleteProperty(target,key){console.log("删除属性")
    }
})
proxy.name; // 读取属性值
proxy.name = "李四";// 设置属性值
delete proxy[name] ;// 删除属性

自定义的业务逻辑

// 判断是否是对象
function isObj(val) {return val !== null && typeof val === "object"}
// 判断以后对象是否有指定属性
function hasOwn(target, key) {return target.hasOwnProperty(key)
}

// 存储代理信息
const toProxy = new WeakMap()
const toRaw = new WeakMap()

/**
 * 创立响应式对象
 */
function createReactiveObj(target) {
    // 指标不是对象，间接返回 target
    if (!isObj(target)) {return target}

    const proxy = toProxy.get(target)
    // 如果指标对象已被代理，间接返回代理对象
    if (proxy) {return proxy}
    // 如果指标对象是代理对象，并有对应的真的对象，间接返回
    if (toRaw.has(target)) {return target}

    // 生成代理对象
    const observed = new Proxy(target, {get(target, key, receiver) {console.log("读取值");
            const result = Reflect.get(target, key, receiver)
            // 为返回值增加代理
            return isObj(result) ? reactive(result) : result
        },
        set(target, key, value, receiver) {
            // 判断指标对象是否曾经存在该属性
            const hasProperty = hasOwn(target, key)
            const oldVal = Reflect.get(target, key)
            if (!hasProperty) {console.log("新增属性");
            } else if (oldVal !== value) {console.log("批改属性");
            }
            return Reflect.set(target, key, value, receiver)
        },
        deleteProperty(target, key) {console.log("删除值");
            return Reflect.deleteProperty(target, key)
        }
    })
    // 增加指标对象与代理对象到 Map
    toProxy.set(target, observed)
    toRaw.set(observed, target)
    return observed
}
// 响应式入口
function reactive(target) {return createReactiveObj(target)
}

与根本流程相比，自定义实现的性能

解决多层对象侦测的问题，

get 中判断
屡次代理

用 WeakMap 存储代理信息，判断是否曾经被代理，或者自身是代理对象
数组 push 产生两次 get，一次属性一次 length

新旧值比照，在 push 元素后 length 曾经扭转，第二次的 get 不对 length 做任何批改，防止了增加一个值，视图更新两次

Proxy 的 handler 中还能够写很多办法，以满足简单的业务

正文完