蝙蝠岛资源网 Design By www.hbtsch.com
defineProperty 定义对象的属性,只不过属性里的get和set实现了响应式。
常用:
- value属性值
- get
- set
- writeable 是否可写
- enumrable 可遍历
Vue从改变一个数据到发生改变的过程
Vue2.X数据响应原理
创建页面,实现延时2s修改对象的值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>LearnVue3.0</title> </head> <body> <div id="app"></div> <script type="text/javascript" src="/UploadFiles/2021-04-02/test.js">defineProperty 实现:
function vue() { this.$data = { a: 1 }; this.el = document.getElementById('app'); this._html = ""; this.observe(this.$data); this.render(); } vue.prototype.observe = function (obj) { let self = this; let value; for (let key in obj) { value = obj[key]; if (typeof value === 'object') { this.observe(value); } else { Object.defineProperty(this.$data, key, { get: function () { return value; }, set: function (newvalue) { value = newvalue; self.render() } }) } } } vue.prototype.render = function () { this._html = "I am " + this.$data.a; this.el.innerHTML = this._html; }在Chrome中console运行,结果页面显示: I am 444
针对数组特性化处理:
let arraypro = Array.prototype; // 为什么要create再次创建对象,create是深拷贝,不影响之前的arraypro let arrayob = Object.create(arraypro); // 定义哪些方法触发更新 let arr = ["push", "pop", "shift"]; // arr里的方法,既能保持原有方法,又能触发更新 // 装饰者模式 arr.forEach(function (method, index) { // 对自己的push方法重写 arrayob[method] = function () { let ret = arraypro[method].apply(this, arguments); // self.render(); console.log('检测到数组变化,触发更新'); return ret; } });在Chrome中console运行示例:
let arr = []; arr.__proto__ = arrayob; arr.push(1);结果显示:
Vue3.0数据响应原理
Vue3.0数据响应原理
创建页面,实现延时2s修改对象的值。代码同上。
Proxy实现:
function vue() { this.$data = { a: 1 }; this.el = document.getElementById('app'); this._html = ""; this.observe(this.$data); this.render(); } vue.prototype.observe = function (obj) { let self = this; this.$data = new Proxy(this.$data, { get: function (target, key) { return target[key]; }, set: function (target, key, newvalue) { target[key] = newvalue; self.render(); } }) } vue.prototype.render = function () { this._html = "I am " + this.$data.a; this.el.innerHTML = this._html; }在Chrome中console运行,结果页面显示: I am 444
为什么改用Proxy
- defineProperty只能监听某个属性,不能对全对象监听
- 可以省去for in循环提升效率
- 可以监听数组,不用再去单独的对数组做特异性操作
Proxy还能做什么
校验类型
function createValidator(target, validator) { return new Proxy(target, { _validator: validator, set(target, key, value, proxy) { if(target.hasOwnProperty(key)) { let validator = this._validator[key]; if(validator(value)) { return Reflect.set(target, key, value, proxy); } else { throw Error('type error'); } } } }) } let personValidator = { name(val) { return typeof val === 'string'; }, age(val) { return typeof val === 'number' && val > 18; } } class person { constructor(name, age) { this.name = name; this.age = age; return createValidator(this, personValidator); } }
在Chrome中console运行示例:
let tmp = new person('张三', 30);
结果显示:
真正的私有变量
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无Vue2.X和Vue3.0数据响应原理变化的区别的评论...
更新日志
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]