<template>
<div id="app">
<input type="text" v-model='msg'>
<div>
<p>{{msg}}</p>
</div>
</div>
</template> <script> class Observer{
static _observe(obj){
for(var key in obj){
//遍历obj对象 var value =obj[key];
if(typeof value ==='object'){
//如果值还是对象,则遍历处理
Observer._observe(value);
}
console.log("========def" ,key);
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
set: function (newValue) {
if( value !== newValue ) {
var value = newValue;
console.log('setter:' + newValue);
}
},
get: function () {
console.log('getter:' +value);
return value;
}
}); }
}
} class VM{
constructor(options){
this.$options = options;
this._obverse(this.$options.data);
return Object.assign({data:this.$options.data}, this.$options.methods );
}
_obverse(data) {
return Observer._observe(data);
} }
var vm = new VM({
el: '#app',
data: {
msg:'hello'
},
methods: {
hello:function(){
console.log("hello");
}
}
}) vm.data.msg = "wwww"
var x = vm.data.msg;
vm.hello(); </script>

virtualvm2 观察者模式的更多相关文章

  1. 23种设计模式--观察者模式-Observer Pattern

    一.观察者模式的介绍      观察者模式从字面的意思上理解,肯定有两个对象一个是观察者,另外一个是被观察者,观察者模式就是当被观察者发生改变得时候发送通知给观察者,当然这个观察者可以是多个对象,在项 ...

  2. 谈谈JS的观察者模式(自定义事件)

    呼呼...前不久参加了一个笔试,里面有一到JS编程题,当时看着题目就蒙圈...后来研究了一下,原来就是所谓的观察者模式.就记下来...^_^ 题目 [附加题] 请实现下面的自定义事件 Event 对象 ...

  3. ObserverPattern(观察者模式)

    import java.util.ArrayList; import java.util.List; /** * 观察者模式 * @author TMAC-J * 牵一发而动全身来形容观察者模式在合适 ...

  4. java观察者模式

      像activeMQ等消息队列中,我们经常会使用发布订阅模式,但是你有没有想过,客户端时如何及时得到订阅的主题的信息?其实就里就用到了观察者模式.在软件系统中,当一个对象的行为依赖于另一个对象的状态 ...

  5. Backbone源码解析(六):观察者模式应用

    卤煮在大概一年前写过backbone的源码分析,里面讲的是对一些backbone框架的方法的讲解.这几天重新看了几遍backbone的源码,才发现之前对于它的理解不够深入,只关注了它的一些部分的细节和 ...

  6. PHP 高级编程(3/5) - 使用SPL(标准PHP库)实现观察者模式

    SPL(标准PHP库 - Standard PHP Library)是PHP5面向对象功能中重要的部分.原文解释是这样的“The Standard PHP Library (SPL) is a col ...

  7. 设计模式--观察者模式初探和java Observable模式

    初步认识观察者模式 观察者模式又称为发布/订阅(Publish/Subscribe)模式,因此我们可以用报纸期刊的订阅来形象的说明: 报社方负责出版报纸. 你订阅了该报社的报纸,那么只要报社发布了新报 ...

  8. 学C#之设计模式系列笔记(2)观察者模式

    一.借鉴说明 1.<Head First Design Patterns>(中文名<深入浅出设计模式>) 2.维基百科,观察者模式,https://zh.wikipedia.o ...

  9. PHP 观察者模式

    观察者模式:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新. [观察者模式中主要角色] 1.抽象主题(Subject)角色: 抽象主题提供了增加 ...

  10. GJM: 设计模式 - 观察者模式

    GJM : 观察者模式 视频地址: http://www.imooc.com/learn/415 本课程通过一个天气预报的发布和订阅案例,来讲解观察者模式在Java项目中的应用.主要包括观察者模式的结 ...

随机推荐

  1. [转]B树与B+树----mysql的索引结构

    B树 和B+树是 MySQL索引使用的数据结构,对于索引优化和原理理解都非常重要,下面我的写文章就是要把B树,B+树的神秘面纱揭开,让大家在面试的时候碰到这个知识点一往无前,不再成为你的知识盲点! 1 ...

  2. 百题计划-4 codeforces 652 div2 D. TediousLee 找规律

    https://codeforces.com/contest/1369/problem/D n<=2e6,所以只要找递推式就可以了,不需要找快速幂 /** */ #include<bits ...

  3. rust crm 镜像源管理

    一.下载crm cargo install crm https://github.com/wtklbm/crm 二.命令 # 在终端执行 # # NOTE: # - [args] 表示 args 是一 ...

  4. vulnhub:Victim01靶机

    kali:192.168.111.111 靶机:192.168.111.170 信息收集 端口扫描 nmap -A -v -sV -T5 -p- --script=http-enum 192.168. ...

  5. vue 3 打印 print-js

    1.安装 npm install print-js --save 2.引用 import print from 'print-js' 3.编写打印函数 const enterDialog = asyn ...

  6. .NET Core3.1升级.NET5 oracle连接报错

    如果报以下错误 The type initializer for 'OracleInternal.ServiceObjects.OracleConnectionImpl' threw an excep ...

  7. pgsql表结构复制

    CREATE TABLE pavement_damage_dtl_temp(like pavement_damage_dtl); 搜索 复制

  8. element-ui casader组件动态加载的回显问题

    最近在做项目的时候用到了element-ui的cascader来做省市区的级联显示 我要做的需求就是在选择某个省的时候,再去加载省下面的所有市,在实现这个需求的过程中遇到了二级菜单不能反显的情况.以下 ...

  9. 使用vue3在element plus中在el-table中拖拽

    1.安装 vuedraggable npm i -S vuedraggable 2.在使用的组件,引入.sortablejs包含在vuedraggable import Sortable from & ...

  10. 062_Apex使用Assert

    assert关键字用法简单,但是使用assert往往会让你陷入越来越深的陷阱中.应避免使用.总结了以下原因:   1.用assert代替if是陷阱之二.assert的判断和if语句差不多,但两者的作用 ...