06-实现Vue数据劫持

最新推荐文章于 2023-09-19 14:40:35 发布
最新推荐文章于 2023-09-19 14:40:35 发布
阅读量252 收藏
点赞数
分类专栏： # JavaScript学习随记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41219001/article/details/108815720
版权

目录

1. 数据劫持

1-1. 术语解释

  访问或者修改对象的某个属性时，在访问和修改属性值时，除了执行基本的数据获取和修改操作以外，还基于数据的操作行为，以数据为基础去执行额外的操作；
  当前最经典的数据劫持应用就是数据渲染，各大前端框架的核心功能都是基于数据渲染来实现。

1-2. 通过vue实现数据劫持的例子

<div id="app">
    {{message}}
    <div v-html="htmlDate"></div>
    <input v-model="modelData" /> {{modelData}}
</div>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: "测试数据",
            htmlDate: "html数据",
            modelData: "双绑数据"
        }
    })
    setTimeout(() => {
        vm.message = "修改数据"
    }, 1000)
</script>

2. defineProperty实现数据劫持

  • 当数据不存在时，get会创建数据
let o = {};
Object.defineProperty(o, "message", {
    get() {
        console.log("get...");
        return "测试数据";
    },
    set(newValue) {
        console.log("set...", newValue);
    }
})
console.log(o);
>{}
  message: "测试数据"
 >get message: ƒ get()
 >set message: ƒ set(newValue)
 >__proto__: Object
>get...

2-1. configurable属性——是否允许对对象进行配置

// configurable: false
let o = {};
Object.defineProperty(o, "message", {
    configurable: false,
    get() {
        console.log("get...");
        return "测试数据";
    },
    set(newValue) {
        console.log("set...", newValue);
    }
})
delete o.message;
console.log(o);
>{}
  message: "测试数据"
 >get message: ƒ get()
 >set message: ƒ set(newValue)
 >__proto__: Object
>get...

// configurable: true
let o = {};
Object.defineProperty(o, "message", {
    configurable: true,
    get() {
        console.log("get...");
        return "测试数据";
    },
    set(newValue) {
        console.log("set...", newValue);
    }
})
delete o.message;
console.log(o);
>{}
 >__proto__: Object

2-2. enumerable属性——是否允许对对象进行枚举

// enumerable: false
let o = {};
Object.defineProperty(o, "message", {
    enumerable: false,
    get() {
        console.log("get...");
        return "测试数据";
    },
    set(newValue) {
        console.log("set...", newValue);
    }
})
for(let i in o){
    console.log(i)
}
>【无输出】

// enumerable: true
let o = {};
Object.defineProperty(o, "message", {
    enumerable: true,
    get() {
        console.log("get...");
        return "测试数据";
    },
    set(newValue) {
        console.log("set...", newValue);
    }
})
for(let i in o){
    console.log(i)
}
>message

3. 通过defineProperty实现vue数据劫持的过程

3-1. 数据渲染视图

<body>
    <div id="app">
        111{{message}}111
        <div>
            111
            <div>
                {{message}}
            </div>
        </div>
        <div v-html="htmlData"></div>
        <input v-model="modelData" /> {{modelData}}
    </div>
</body>

<script>
    let m = new myVue({
        el: "#app",
        data: {
            message: "测试数据",
            htmlData: "html数据",
            modelData: "绑定的数据"
        }
    })
</script>

class myVue {
    constructor(options) {
        this.$options = options;
        this.compile();
    }

    compile() {
        let el = document.querySelector(this.$options.el);
        this.compileNode(el);
    }

    compileNode(el) {
        let childNodes = el.childNodes;
        childNodes.forEach(node => {
            if (node.nodeType === 1) {
                // 便签
                let attrs = node.attributes;
                [...attrs].forEach(attr => {
                    let attrName = attr.name;
                    let attrValue = attr.value;
                    if (attrName.indexOf("v-" === 0)) {
                        attrName = attrName.substr(2);
                        if (attrName === "html") {
                            node.innerHTML = this.$options.data[attrValue];
                        } else if (attrName === "model") {
                            node.value = this.$options.data[attrValue];
                        }
                    }
                })
                if (node.childNodes.length > 0) {
                    this.compileNode(node);
                }
            } else if (node.nodeType === 3) {
                // 文本节点
                let reg = /\{\{\s*(\S+)\s*\}\}/g;
                let textContent = node.textContent;
                if (reg.test(textContent)) {
                    let $1 = RegExp.$1;
                    node.textContent = node.textContent.replace(reg, this.$options.data[$1]);
                }
            }
        });
    }
}

3-2. 数据劫持的实现

observe(data) {
    let keys = Object.keys(data);
    console.log(keys);
    keys.forEach(key => {
        this.defineReact(data, key, data[key]);
    })
}

defineReact(data, key, value) {
    Object.defineProperty(data, key, {
        configurable: true,
        enumerable: true,
        get() {
            console.log("get...");
            return value;
        },
        set(newValue) {
            console.log("set...", newValue);
            
        }
    })
}

3-3. 数据驱动视图更新

  • 事件绑定
this.addEventListener($1, e => {
	//重新渲染视图
	let oldValue = this.$options.data[$1];
	let reg = new RegExp(oldValue);
	node.textContent = node.textContent.replace(reg, e.detail);
})
  • 事件触发
let event = new CustomEvent(key, {
    detail: newValue
});
_this.dispatchEvent(event);

3-4. 双向绑定

  • 通过数据劫持监听数据data[key]
set(newValue) {
    console.log("set...", newValue);
    let event = new CustomEvent(key, {
        detail: newValue
    });
    _this.dispatchEvent(event);
    value = newValue;
}
  • 为每个key绑定其数据视图更新方法
this.addEventListener($1, e => {
	//重新渲染视图
	let oldValue = this.$options.data[$1];
	let reg = new RegExp(oldValue);
	node.textContent = node.textContent.replace(reg, e.detail);
})
  • 监听输入框的值并改变data[key]
if (attrName === "model") {
    node.value = this.$options.data[attrValue];
    node.addEventListener("input", e => {
        this.$options.data[attrValue] = e.target.value;
    })
  • 一旦输入框的值发生改变，就会改变data[key]中的值；defineProperty中的set()会监听到key对应的数据的变化；
    从而调用key所绑定的重新渲染视图的方法而改变视图中的数据；

3-5. 完整代码

<body>
    <div id="app">
        111{{message}}111
        <div>
            111
            <div>
                {{message}}
            </div>
        </div>
        <div v-html="htmlData"></div>
        <input v-model="modelData" /> {{modelData}}
    </div>
</body>

<script>
    let m = new myVue({
        el: "#app",
        data: {
            message: "测试数据",
            htmlData: "html数据",
            modelData: "绑定的数据"
        }
    })
    console.log(m.$options.data);
    setTimeout(() => {
        m.$options.data.message = "修改的数据";
    }, 1000)
</script>

class myVue extends EventTarget {
    constructor(options) {
        super();
        this.$options = options;
        this.compile();
        this.observe(this.$options.data)
    }

    observe(data) {
        let keys = Object.keys(data);
        keys.forEach(key => {
            this.defineReact(data, key, data[key]);
        })
    }

    defineReact(data, key, value) {
        let _this = this;
        Object.defineProperty(data, key, {
            configurable: true,
            enumerable: true,
            get() {
                console.log("get...", value);
                return value;
            },
            set(newValue) {
                console.log("set...", newValue);
                let event = new CustomEvent(key, {
                    detail: newValue
                });
                _this.dispatchEvent(event);
                value = newValue;
            }
        })
    }

    compile() {
        let el = document.querySelector(this.$options.el);
        this.compileNode(el);
    }

    compileNode(el) {
        let childNodes = el.childNodes;
        childNodes.forEach(node => {
            if (node.nodeType === 1) {
                // 便签
                let attrs = node.attributes;
                [...attrs].forEach(attr => {
                    let attrName = attr.name;
                    let attrValue = attr.value;
                    if (attrName.indexOf("v-" === 0)) {
                        attrName = attrName.substr(2);
                        if (attrName === "html") {
                            node.innerHTML = this.$options.data[attrValue];
                        } else if (attrName === "model") {
                            node.value = this.$options.data[attrValue];
                            node.addEventListener("input", e => {
                                this.$options.data[attrValue] = e.target.value;
                            })
                        }
                    }
                })
                if (node.childNodes.length > 0) {
                    this.compileNode(node);
                }
            } else if (node.nodeType === 3) {
                // 文本节点
                let reg = /\{\{\s*(\S+)\s*\}\}/g;
                let textContent = node.textContent;
                if (reg.test(textContent)) {
                    let $1 = RegExp.$1;
                    node.textContent = node.textContent.replace(reg, this.$options.data[$1]);
                    this.addEventListener($1, e => {
                        //重新渲染视图
                        console.log("渲染视图的key:",$1)
                        let oldValue = this.$options.data[$1];
                        let reg = new RegExp(oldValue);
                        node.textContent = node.textContent.replace(reg, e.detail);
                    })
                }
            }
        });
    }
}

4. Proxy实现数据劫持

let obj = {
    name: "张三",
    age: 20
}
let newObj = new Proxy(obj,{
    get(target,key){
        console.log("get...",target[key]);
        return target[key];
    },
    set(target,key,newValue){
        console.log("set...",target[key],"为",newValue);
        target[key] = newValue;
        return true;
    }
})

newObj.name;
>get... 张三

newObj.name = "李四";
>set... 张三 为 李四

4-1. 基于Proxy数据劫持对3.中代码的修改

  • 将3.中的observe()和defineReact()简化为observe() — 简化了循环操作
observe(data){
    this.$options.data = new Proxy(data,{
        get(target,key){
            return target[key];
        },
        set(target,key,newValue){
            target[key] = newValue;
            return true;
        }
    })
}
  • 存在不能二次渲染视图的问题，因此需要绑定事件—在set()中添加绑定事件
set(target, key, newValue) {
    let event = new CustomEvent(key, {
        detail: newValue
    });
    _this.dispatchEvent(event);
    target[key] = newValue;
    return true;
}

4-2. 修改后的完整代码

class myVue extends EventTarget {
    constructor(options) {
        super();
        this.$options = options;
        this.compile();
        this.observe(this.$options.data)
    }

    observe(data) {
        let _this = this;
        this.$options.data = new Proxy(data, {
            get(target, key) {
                return target[key];
            },
            set(target, key, newValue) {
                let event = new CustomEvent(key, {
                    detail: newValue
                });
                _this.dispatchEvent(event);
                target[key] = newValue;
                return true;
            }
        })
    }

    compile() {
        let el = document.querySelector(this.$options.el);
        this.compileNode(el);
    }

    compileNode(el) {
        let childNodes = el.childNodes;
        childNodes.forEach(node => {
            if (node.nodeType === 1) {
                // 便签
                let attrs = node.attributes;
                [...attrs].forEach(attr => {
                    let attrName = attr.name;
                    let attrValue = attr.value;
                    if (attrName.indexOf("v-" === 0)) {
                        attrName = attrName.substr(2);
                        if (attrName === "html") {
                            node.innerHTML = this.$options.data[attrValue];
                        } else if (attrName === "model") {
                            node.value = this.$options.data[attrValue];
                            node.addEventListener("input", e => {
                                this.$options.data[attrValue] = e.target.value;
                            })
                        }
                    }
                })
                if (node.childNodes.length > 0) {
                    this.compileNode(node);
                }
            } else if (node.nodeType === 3) {
                // 文本节点
                let reg = /\{\{\s*(\S+)\s*\}\}/g;
                let textContent = node.textContent;
                if (reg.test(textContent)) {
                    let $1 = RegExp.$1;
                    node.textContent = node.textContent.replace(reg, this.$options.data[$1]);
                    this.addEventListener($1, e => {
                        //重新渲染视图
                        console.log("渲染视图的key:", $1)
                        let oldValue = this.$options.data[$1];
                        let reg = new RegExp(oldValue);
                        node.textContent = node.textContent.replace(reg, e.detail);
                    })
                }
            }
        });
    }
}
罐子丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入浅出 Vue 系列 -- 数据劫持实现原理
10-17
深入浅出 Vue 系列 -- 数据劫持实现原理
pytorch中自定义数据集加载对象重写Dataset
CSDN 精品推荐
11-13 916
我们所有的图片都是在一个文件下，每个图像的标签含在一个csv文件中，所以不能利用Pytorch中的ImageFolder进行加载，所以需要自己重写DataSet类，实现读写数据。在pytorch中，数据加载可以通过自动逸的数据集对象来实现，数据集对象被抽象为Dataset类，实现自定义的数据集需要继承Dataset，并实现相应的方法。
torch中datasets.load_dataset用法
zhouwenyuan1015的博客
08-30 8413
转发：https://blog.csdn.net/weixin_49346755/article/details/125284869。
pytorch中几种Dataset读取数据重写实现
kenny's blog
06-07 1799
通过重写Dataset类，对自己制作的数据集进行读取后传给DataLoader。主要用来完成从哪里读取数据和标签的功能。主要是__getitem__(返回数据集和标签)和__len__（返回数据的长度）这两个方法。 import numpy as np import torch import os from PIL import Image from torch.utils.data import Dataset class MyDataset_1(Dataset): """ 通过包含数据
PyTorch：重写/改写Dataset并载入Dataloader
鳄鱼的博客
07-13 5829
前言 众所周知，Dataset和Dataloder是pytorch中进行数据载入的部件。必须将数据载入后，再进行深度学习模型的训练。在pytorch的一些案例教学中，常使用torchvision.datasets自带的MNIST、CIFAR-10数据集，一般流程为： # 下载并存放数据集 train_dataset = torchvision.datasets.CIFAR10(root="数据集存放位置",download=True) # load数据 train_loader = torch.utils.
大数据之Hadoop分布式数据仓库HBase
zouyang920的博客
04-28 1982
HBase 是一个构建在 Hadoop 文件系统之上的面向列的数据库管理系统。HBase 是一种类似于 Google’s Big Table 的数据模型，它是 Hadoop 生态系统的一部分，它将数据存储在 HDFS 上，客户端可以通过 HBase 实现对 HDFS 上数据的随机访问。不支持复杂的事务，只支持行级事务，即单行数据的读写都是原子性的；由于是采用 HDFS 作为底层存储，所以和 HDFS 一样，支持结构化、半结构化和非结构化的存储；支持通过增加机器进行横向扩展；支持数据分片；
3分钟了解vue数据劫持的原理实现
10-17
主要介绍了3分钟了解vue数据劫持的原理实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue实现双向数据绑定
01-19
答案是前端数据劫持。其通过Object.defineProperty()方法，这个方法可以设置getter和setter函数，在setter函数中，就可以监听到数据的变化，从而更新绑定的元素的值。 实现对象属性变化绑定到UI 大概的思路是： 1....
Vue的双向数据绑定实现原理解析
01-19
　vuejs是采取数据劫持结合发布者-订阅者模式的方式实现model–>view的数据绑定，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的数据回调。 至于view-model...
DataLoder的使用————Transforms
weixin_45947476的博客
10-14 663
哔哩大学的PyTorch深度学习快速入门教程（绝对通俗易懂！）【小土堆】 的P15讲讲述了dataloder的下载使用。 dataloder作用
深度学习常见的transform和dataloder联合transform
最新发布
weixin_63163242的博客
09-19 195
dataset如同扑克牌 完好的新的，而dataloder就如同打乱了 拿在手中的牌，batch_size指的就是我每次抓牌 抓两张牌，shuffle为1的话，就打乱牌，num_workers有时候在windows下运行会出问题，这时候设置成0试试看，drop_last是如果100张牌，每次取3张，最后一张牌是否舍去？randomcrop是随机裁剪，随机裁剪可以用于数据增强，学习transform就是先看输入输出，再看案例，再试着用用，看看效果，即使不知道是什么类型的输出，直接就是那个打印。
python中字符串的两种序号体系_Python语言程序设计第二章.ipynb
weixin_29159613的博客
03-02 661
{"cells": [{"cell_type": "markdown","metadata": {},"source": ["# 第2章 Python程序实例解析\n","## 温度转换程序实例\n","温度刻画存在不同体系，摄氏度以1标准大气压下水的结冰点为0度，沸点为100度，将温度进行等分刻画。华氏度以1标准大气压下水的结冰点为32度，沸点为212度，将温度进行等分刻画。 \n","问题：...
大数据----Hadoop与数据仓库
weixin_46002001的博客
07-01 2791
传统数据仓库一般建立在Oracle、MySQL这样的关系数据库系统之上。关系数据库主要的问题是不好扩展，但Hadoop的数据和计算都是分布式的，可以处理海量数量。
Hadoop之数据仓库概述
柳小葱的博客
07-10 4430
????大家好久不见了，最近实习比较忙，但也在实习过程中发现了自己的不足，今天我们就来讲一讲数据仓库的建设（大厂数据开发实习）有很完整的数仓体系，所以这方面的知识是需要进行系统学习的。有必要说明，本文是在流行的大数据分布式存储和计算平台Hadoop上设计实现数据仓库。 1.数据仓库 1.1 数据仓库的历史 数据仓库的概念可以追溯到20世纪80年代，当时IBM的研究人员开发出了“商业数据仓库”。本质上，数据仓库试图提供一种从操作型系统到决策支持环境的数据流架构模型。数据仓库概念的提出，是为了解决和这个数据流
进击大数据系列（七）： Hadoop 数据仓库 Hive
民工哥的博客
06-15 194
点击下方名片，设为星标！回复“1024”获取2TB学习资源！前面介绍了 Hadoop 架构基石 HDFS、统一资源管理和调度平台 YARN、分布式计算框架 MapReduce等相关的知识点，今天我将详细的为大家介绍 大数据 Hadoop 数据仓库 Hive 相关知识，希望大家能够从中收获多多！如有帮助，请点在看、转发支持一波！！！概述数据仓库概念数据仓库(Data Warehouse)是一个面向...
Python操作Excel进行数据读取-之xlrd模块
whwzz的博客
11-19 7207
Python操作Excel进行数据读取之xlrd
python3 写入excel表格数据_Python3读取和写入excel表格数据
weixin_35336727的博客
02-03 2647
目录python操作excel主要用到xlrd和xlwt 这两个库，xlrd读取excel表格数据， 支持 xlsx和xls格式的excel表格 ；xlwt写入excel表格数据；一、python读取excel表格数据1、读取excel表格数据常用操作import xlrd# 打开excel表格data_excel=xlrd.open_workbook('data/dataset.xlsx')#...
Python操作Excel
2021dragon的博客
12-16 5511
xlrd是Python处理Excel表格数据的一个模块，能够对Excel中的数据进行读取。
SLAM学习 | 对ORB-SLAM2运行结果KeyFrameTrajectory.txt内容的说明
Chen_Tianyang的博客
11-30 6303
这篇文章对ORB-SLAM2运行结果KeyFrameTrajectory.txt文件的内容进行简单的解释说明。KeyFrameTrajectory.txt文件内记录了ORB-SLAM2系统运行开始到结束这段时间内相机的关键帧位姿，理解KeyFrameTrajectory.txt文件内容是进行后续应用的第一步。
vue 如何实现数据劫持
05-05
Vue 实现数据劫持的方式是使用了 ES5 中的 Object.defineProperty() 方法，通过该方法给对象的属性添加 getter 和 setter 方法，从而实现对数据的监测和控制。 具体实现步骤如下： 1. 创建一个 Observer 对象，用于对数据进行监听和劫持。 2. 在 Observer 中使用 Object.defineProperty() 方法，给数据对象的每个属性添加 getter 和 setter 方法。 3. 在 getter 方法中，收集依赖并返回属性值。 4. 在 setter 方法中，更新属性的值，并通知所有依赖进行更新。 下面是一个简单的实现示例： ```javascript function Observer(data) { this.data = data; this.walk(data); } Observer.prototype = { walk: function(data) { var self = this; Object.keys(data).forEach(function(key) { self.defineReactive(data, key, data[key]); }); }, defineReactive: function(data, key, val) { var dep = new Dep(); Object.defineProperty(data, key, { enumerable: true, configurable: true, get: function() { if (Dep.target) { dep.depend(); } return val; }, set: function(newVal) { if (newVal === val) { return; } val = newVal; dep.notify(); } }); } }; function Dep() { this.subs = []; } Dep.prototype = { addSub: function(sub) { this.subs.push(sub); }, depend: function() { if (Dep.target) { this.addSub(Dep.target); } }, notify: function() { this.subs.forEach(function(sub) { sub.update(); }); } }; Dep.target = null; ``` 在上述代码中，Observer 对象用于对数据对象进行监听和劫持，defineReactive() 方法使用 Object.defineProperty() 方法给数据对象的每个属性添加 getter 和 setter 方法，Dep 对象用于收集依赖和通知更新，而 Dep.target 用于存储当前的 Watcher 对象（用于收集依赖）。 这样，当数据对象的属性值发生变化时，就会自动触发 setter 方法，从而通知所有依赖进行更新。而当 Watcher 对象读取属性值时，就会触发 getter 方法，从而将 Watcher 对象收集到依赖列表中。这样，就实现了数据劫持的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值