用JS实现响应式对象(VUE同原理)

news/2024/7/10 1:38:20 标签: vue, js, javascript, object

Vue.js 实现响应式的核心是利用了 ES5 的Object.defineProperty,这儿尝试使用Object.defineProperty实现一个响应式对象,帮助理解Vue的深入响应式原理。
直接上代码:

javascript">let x={};
let value =10;
Object.defineProperty(x,'v',{
    get(){console.log('get');return value},
    set(newV){console.log('set');value=newV},
    configurable: true,
    enumerable: true
})

这样我们为对象x绑定了getter和setter,当调用x.v或改变x.v的值时,我们就能通过getter和setter得知。
在这里插入图片描述


http://www.niftyadmin.cn/n/1355274.html

相关文章

echart 数据点可以加链接吗_vue之将echart封装为组件

最近的新项目里,有大量数据图表类的需求,为了增强代码的复用性,减少冗余,我开始思考如何将echart封装为组件调用。本文将会以雷达图为案例,一步步讲解在vue项目中如何使用echart,如何将其封装为能重复调用的…

js防抖

antiShake(func, time) {let timer null;return function() {if (timer ! null) {clearTimeout(timer);}timer setTimeout(func, time);}; }

vim shiftwidth_VIM学习笔记 模式行(Modeline)

程序员对于制表符常常有不同的偏好,有的使用8个空格,而有的则使用4个空格。可以想见,如果使用不同设置的用户操作相同的文件,必将对文本格式造成影响。如果希望针对特定文件应用特定的设置,那么修改全局性的vimrc配置文…

自己封装一个VUE表格组件

直接上源码 <template><table class"my_table" :style"tableStyle"><thead ref"header"><tr :style"theadStyle"><th v-for"(item, index) in new_columns" :key"item.unique || index&qu…

microsoftbarcode控件9.0安装后不显示_AnyCAD Rapid .Net三维控件WinForms集成教程

1 准备工作AnyCAD Rapid .Net三维控件底层基于C&#xff0c;在Windows下依赖Vistual C 运行时库。因此64位版本需要在客户机上安装vc_redist.x64.exe&#xff0c;32位版本需要安装vc_redist.x86.exe。下载&#xff1a;链接:https://pan.baidu.com/s/145y9R11URPu_JennJStz6A 提…

JS处理除法结果

取余数&#xff1a; a%b取整数&#xff1a; parseInt(a/b)向上取整&#xff1a; Math.ceil(a/b)向下取整&#xff1a; Math.floor(a/b)四舍五入&#xff1a; Math.round(a/b)

python提取矩阵元素_numpy或list数组中最大元素的索引如何使用python获取

numpy或list数组中最大元素的索引如何使用python获取 发布时间&#xff1a;2020-11-17 14:07:49 来源&#xff1a;亿速云 阅读&#xff1a;65 numpy或list数组中最大元素的索引如何使用python获取&#xff1f;针对这个问题&#xff0c;这篇文章详细介绍了相对应的分析和解答&am…

JS 获取DOM的方法汇总

JS 获取DOM的方法汇总 功能方法返回获取bodydocument.bodyDOM对象获取htmldocument.documentElementDOM对象通过标签名获取document.getElementsByTagName数组通过类名获取document.getElementsByClassName数组通过name获取document.getElementsByName数组通过id获取document.…