手写vue observe数据劫持
实现代码:
class Vue {
constructor(options) {
//缓存参数
this.$options = options;
//需要监听的数据
this.$data = options.data;
//数据监听
this.observe(this.$data);
}
observe(value) {
if (!value || typeof value !== 'object') {
return;
}
/*
取到每个key和value 调用definReactive 进行数据劫持
*/
Object.keys(value).forEach(key => {
//深度监听
if (typeof value[key] === 'object') {
this.observe(value[key]);
}
this.definReactive(value, key, value[key]);
})
}
definReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
return val;
},
set(newVal) {
if (newVal === val) {
return;
}
val = newVal;
console.log(`${key}属性更新了:${val}`);
}
})
}
}
测试代码:
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<script src="./vue.js"></script>
<script>
const app = new Vue({
data: {
test: "i am test",
foo: {
bar: "bar"
}
}
});
app.$data.test = "hello world!!";
app.$data.foo.bar = "oh my bar";
</script>
</body> </html>
测试结果:
手写vue observe数据劫持的更多相关文章
- 剖析手写Vue，你也可以手写一个MVVM框架
剖析手写Vue,你也可以手写一个MVVM框架# 邮箱:563995050@qq.com github: https://github.com/xiaoqiuxiong 作者:肖秋雄(eddy) 温馨提 ...
- 手写 Vue 系列 之 Vue1.x
前言 前面我们用 12 篇文章详细讲解了 Vue2 的框架源码.接下来我们就开始手写 Vue 系列,写一个自己的 Vue 框架,用最简单的代码实现 Vue 的核心功能,进一步理解 Vue 核心原理. ...
- 手写 Vue 系列 之 从 Vue1 升级到 Vue2
前言 上一篇文章 手写 Vue 系列 之 Vue1.x 带大家从零开始实现了 Vue1 的核心原理,包括如下功能: 数据响应式拦截 普通对象 数组 数据响应式更新 依赖收集 Dep Watcher 编 ...
- 学习手写vue，理解原理
class Compiler{ constructor(el,vm){ // 判断el属性 是不是 一个元素, 如果不是就获取 this.el = this.isElementNode(el)?el: ...
- 手写vue双向绑定数据
来一张原理图: 实现思路: (1)绑定data 种的数据,为每个数据添加指令.通过Object,defineProperty() 来通知属性是否更改 (2) 找到每个DOM节点的指令.绑定事件.并绑定 ...
- 手写vue中v-bind:style效果的自定义指令
自定义指令 什么是自定义指令 以 v- 为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令.为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到 ...
- 手写PHP AJAX数据脚本
<script type="text/javascript"> var xmlrequest = ""; function getXMLreques ...
- 手写vue路由
目录 一.简易demo 二.Vue-Router传参方式 三.进阶-路由导航 一.简易demo // routes注册 import Vue from "vue"; // impo ...
- 搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : model - view - viewmodel的缩写,说都能直接说出来 model:模型,view:视图,view-Model:视 ...
随机推荐
- 解决 VS 跳转定义和 Resharper 重复
在大约一周之前,Visual Studio 进行了一项更新,增加了 Ctrl+Click 点击跳转到定义的功能.这项功能与 ReSharper 重复了. 于是可以通过关闭其中一个跳转定义可以使用. V ...
- hdu 4063 Aircraft (Geometry + SP)
Problem - 4063 几何加简单最短路. 题意是给出若干圆的圆心以及半径,求出从给出的起点到终点的最短路径的长度,可以移动的区域是圆覆盖到的任意一个位置. 做法是这样的,对圆两两求交点,用这些 ...
- 2012-4-2 通过MdiParent设置窗体最前
SentenceForm form = new SentenceForm(); form.MdiParent = this; form.Show(); //form.MdiParent = this; ...
- 神经网络入门——8XOR感知器
XOR 感知器 XOR 感知器就是一个这样的逻辑门:输入相同返回 0 ,输入不同返回 1.与之前的感知器不同,这里并不是线性可分的.要处理这类较为复杂的问题,我们需要把感知器连接起来. 我们用 ...
- SVG和canvas画图，js求数组最大最小值
windows命令行的内容怎么复制,右键选择标记,选中内容后再点击鼠标右键就复制了. 安装Node.js后再用npm install命令会出现如下warn:saveError ENOENT: no s ...
- 31页PPT：基于Spark的移动大数据挖掘
31页PPT:基于Spark的移动大数据挖掘 数盟11.16 Data Science Meetup(DSM北京)分享:基于Spark的移动大数据挖掘分享嘉宾:张夏天(TalkingData首席数据科 ...
- Python--day41--条件
1,条件 #锁 #acquire release#一个条件被创建之初 默认有一个False状态#False状态 会影响wait一直处于等待状态#notify(int数据类型) 造钥匙 代码示例:条件. ...
- 2019-10-23-WPF-使用-SharpDx-异步渲染
title author date CreateTime categories WPF 使用 SharpDx 异步渲染 lindexi 2019-10-23 21:18:38 +0800 2018-0 ...
- 漏洞扫描工具AWVS介绍及安装教程
PS:webug靶场全都通关了,你也就是个合格的新手了. 上次我们在通关webug靶场第三关的时候,提到一个漏洞扫描工具叫做AWVS.这次我们介绍一下它. 1 AWVS漏洞扫描工具 Acunetix ...
- 浅谈javaScript数据类型、变量、内存之间的关系，文末有图解
一.变量是没有类型的 在JavaScript中,定义变量的方法是“var 变量名=变量值”,无论这个变量要给他赋值为一个数字.字符串还是数组,他的类型都不需要声明.也就是说如果我只声明了一个变量“va ...