MVVM数据代理

function MVVM(options) {
this.$options = options || {};
var data = this._data = this.$options.data;
var me = this; // 数据代理
// 实现 vm.xxx -> vm._data.xxx
Object.keys(data).forEach(function(key) {
me._proxyData(key);
}); this._initComputed(); observe(data, this); this.$compile = new Compile(options.el || document.body, this)
} MVVM.prototype = {
$watch: function(key, cb, options) {
new Watcher(this, key, cb);
}, _proxyData: function(key, setter, getter) {
var me = this;
setter = setter ||
Object.defineProperty(me, key, {
configurable: false,
enumerable: true,
get: function proxyGetter() {
return me._data[key];
},
set: function proxySetter(newVal) {
me._data[key] = newVal;
}
});
}, _initComputed: function() {
var me = this;
var computed = this.$options.computed;
if (typeof computed === 'object') {
Object.keys(computed).forEach(function(key) {
Object.defineProperty(me, key, {
get: typeof computed[key] === 'function'
? computed[key]
: computed[key].get,
set: function() {}
});
});
}
}
};

MVVM数据代理的更多相关文章

  1. Vue学习之--------el与data的两种写法、MVVM模型、数据代理(2022/7/5)

    文章目录 1.el与data的两种写法 1.1.基础知识 1.2.代码实例 1.3.页面效果 2.MVVM模型 2.1. 基础知识 2.2 .代码实例 2.3.页面效果 3.数据代理 3.1. 基础知 ...

  2. vue的数据代理

    1. vue数据代理: data对象的所有属性的操作(读/写)由vm对象来代理操作2. 好处: 通过vm对象就可以方便的操作data中的数据3. 实现: 1). 通过Object.defineProp ...

  3. 对数据劫持 OR 数据代理 的研究------------引用

    数据劫持,也叫数据代理. 所谓数据劫持,指的是在访问或者修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作或者修改返回结果.比较典型的是 Object.defineProperty() 和 ...

  4. ExtJs4学习(八)数据代理Proxy

    ExtJs数据代理我们介绍常用的四种,但会着重介绍ajax代理,因为日常开发中,这个最为常用 Ext.data.proxy.Ajax AjaxProxy(Ajax数据代理类)是你的应用程序中使用最广泛 ...

  5. 数据代理Object.defineProperty()

    数据代理: 通过一个对象代理对另一个对象中属性的操作(读/写) 数据代理 Object.defineProperty() Object.defineProperty() 方法会直接在一个对象上定义一个 ...

  6. vue中的数据代理原理

    const vm = new Vue({ data:{ name:'boos' } }) // 注意 :使用构造函数构建vue实例时,传入的是一个option对象,它包含了data,computed等 ...

  7. es6中的Proxy和vue中的数据代理的异同

    1:概述 1-1:Proxy 用于修改某些操作的默认行为,Proxy可以说在对对象进行各种访问或者操作的时候在外层进行一层拦截,在操作之前都需要经过这种拦截.proxy返回的是一个新对象,可以通过操作 ...

  8. 8_vue是如何进行数据代理的

    在了解了关于js当中的Object.defineProperty()这个方法后,我们继续对vue当中的数据代理做一个基于现在的解析 建议观看之前先了解下js当中的Obejct.defineProper ...

  9. WPF实战案例-数据代理

    在我们wpf开发中,很多人会有mvvm模式去做wpf的项目. 是否有人遇到这样一个场景:在一个界面上,有个tabcontrol上面有4个页签,每个页签里面都有一个datagrid,里面显示的列基本一样 ...

随机推荐

  1. was cached in the local repository, resolution will not be reattempted until the update interval of fintech has elapsed or updates are forced

    今天使用命令mvn compile编译maven项目时提示错误信息,错误信息如下: [ERROR] Failed to execute goal on project <project_name ...

  2. springcloud~Eureka实例搭建

    服务端 build.gradle配置 dependencies { compile('org.springframework.cloud:spring-cloud-starter-netflix-eu ...

  3. Linux文本三剑客超详细教程---grep、sed、awk

    awk.grep.sed是linux操作文本的三大利器,合称文本三剑客,也是必须掌握的linux命令之一.三者的功能都是处理文本,但侧重点各不相同,其中属awk功能最强大,但也最复杂.grep更适合单 ...

  4. 简易调色盘控件 for .NET(EN)

    By Conmajia Originally posted in 2012 Introduction Simple & fast implementation of a rectangular ...

  5. Python3中列表字符串转数字

    比如我们有个列表: number = [']; 如果我们需要将列表里的元素转换为数字呢?最常用的大家可能会想到使用列表推导式: number = ['] number = [int(x) for x ...

  6. SSM框架使用

    现在的主流框架有SSH和SSM. SSM:SpringMVC(controller)+Spring(管理各组件)+Mybaits SSH:Struct2(controller)+Spring(管理各组 ...

  7. es6之字符串添加的东西

    在es6里边对字符串添加了一些东西! 字符串模板(非常友善) 相信大家之前都遇到过万恶的字符串拼接,真是噩梦,不过之后有了字符串模板之后,再也不用担心字符串拼接会乱了... 之前的字符串拼接 let ...

  8. wordpress的excerpt()函数

    问题:在wordpres中的single页面,本身引用的<?php the_excerpt(); ?>,但是在页面上显示的却是文章的内容 原因:the_excerpt(); 在excerp ...

  9. 获取元素CSS样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 重建程序员能力(2)-如何使asp.net mvc应用增加js和其他功能

    1. 在Visual Studio的解决方案资源管理器,找到项目右键展开右键菜单后选择 管理NuGet程序包. 2.在打开的页面中,可以按需要选择Jquery.BootStrap等页面展现框架. 有工 ...