Vue双向数据绑定原理-上

Vue响应式的原理(数据改变界面就会改变)是什么?

时时监听数据变化, 一旦数据发生变化就更新界面, 这就是Vue响应式的原理。

Vue是如何实现时时监听数据变化的

通过原生JS的defineProperty方法, 通过get和set方法来监听数据的变化。

defineProperty方法的特点

可以直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象。

defineProperty用法

?> 可以直接在一个对象上定义一个新属性

假设我有这么一个需求,给obj对象动态新增一个name属性, 并且name属性的取值必须是BNTang,通过 defineProperty 方法实现。

<script>
    let obj = {};

    Object.defineProperty(obj, 'name', {
        value: 'BNTang'
    });

    console.log(obj);
</script>

defineProperty 是属于 Object 对象的方法,所以我们可以直接通过 Object.defineProperty 来调用。

  • 第一个参数是要定义属性的对象(obj: 需要操作的对象)
  • 第二个参数是要定义或修改的属性的名称(prop: 需要操作的属性)
  • 第三个参数是将被定义或修改的属性描述符(descriptor: 属性描述符)

最终语法如下:

Object.defineProperty(obj, prop, descriptor)

在上面提出的需求中,我们需要动态新增一个 name 属性,所以第一个参数就是 obj 对象,第二个参数就是 name 属性,第三个参数就是 name 属性的描述符。
我在第三个参数中定义了一个 value 属性,这个 value 属性的值就是 BNTang,这样我们就实现了动态新增一个 name 属性,并且 name 属性的值是 BNTang。
value 属性描述符的作用可以通过value来告诉defineProperty方法新增的属性的取值是什么。

!> 默认情况下通过defineProperty新增的属性的取值是不能修改的。

<script>
    let obj = {};

    Object.defineProperty(obj, 'name', {
        value: 'BNTang'
    });
    obj.name = 'test';
    console.log(obj);
</script>

image-20230927002907591

如果想修改, 那么就必须显示的告诉defineProperty方法,这个属性是可修改的,通过writable属性描述符来实现。

<script>
    let obj = {};

    Object.defineProperty(obj, 'name', {
        value: 'BNTang',
        writable: true,
    });
    obj.name = 'test';
    console.log(obj);
</script>

image-20230927003021442

!> 默认情况下通过defineProperty新增的属性是不能删除的。

<script>
    let obj = {};

    Object.defineProperty(obj, 'name', {
        value: 'BNTang',
        writable: true,
    });
    obj.name = 'test';
    delete obj.name;
    console.log(obj);
</script>

image-20230927003304204

如果想删除, 那么就必须显示的告诉defineProperty方法,这个属性是可删除的,通过configurable属性描述符来实现。

<script>
    let obj = {};

    Object.defineProperty(obj, 'name', {
        value: 'BNTang',
        writable: true,
        configurable: true,
    });
    obj.name = 'test';
    delete obj.name;
    console.log(obj);
</script>

image-20230927003427738

!> 默认情况下通过defineProperty新增的属性是不能遍历(迭代的)。

<script>
    let obj = {};

    Object.defineProperty(obj, 'name', {
        value: 'BNTang'
    });

    for (let key in obj) {
        console.log(key, obj[key]);
    }
</script>

如果想迭代, 那么就必须显示的告诉defineProperty方法,这个属性是可迭代的,通过enumerable属性描述符来实现。

<script>
    let obj = {};

    Object.defineProperty(obj, 'name', {
        value: 'BNTang',
        enumerable: true
    });

    for (let key in obj) {
        console.log(key, obj[key]);
    }
</script>

image-20230927003553936

到此为止,定义一个新属性的方法就介绍完了,接下来我们来看看如何修改一个对象的现有属性。

其实非常的简单,只需要在我们定义对象的时候初始化一个属性,并且给这个属性一个初始值,然后在调用 defineProperty 方法的时候,将这个属性的值修改为我们想要的值就可以了。

代码如下:

<script>
    let obj = {name: 'Example'};

    Object.defineProperty(obj, 'name', {
        value: 'BNTang'
    });

    console.log(obj);
</script>

image-20230927003723530

posted @   BNTang  阅读(165)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
历史上的今天:
2020-09-27 Kafka
  1. 1 总会有人离开 王巨星
  2. 2 月亮 孟凡明
  3. 3 迟里乌布
  4. 4 我只能离开 颜人中
  5. 5 达尔文 蔡健雅
  6. 6 夜色滚烫 叶明净
  7. 7 你的星环 路飞文
  8. 8 不再说话 三块木头
  9. 9 黄昏 粥粥和小伙/粥粥
  10. 10 爱不单行 刘大拿
  11. 11 心动贩卖机 PIggy
  12. 12 别来无恙 苏星婕
  13. 13 我们的歌 刘大拿
  14. 14 一直很安静 王贰浪
  15. 15 去有风的地方 清音
  16. 16 雪 Distance Capper/罗言
  17. 17 坏女孩 徐良/小凌
  18. 18 乐园 沧桑Cang333/虎皮蛋/曲甲
  19. 19 Ayo(Explicit) Chris Brown/Tyga
  20. 20 我的美丽feat.海洋Bo 海洋Bo/高睿
  21. 21 世事可爱 粥粥和小伙/粥粥
  22. 22 我记得 赵雷
  23. 23 我想牵着你的手 许嵩
  24. 24 人们都不懂 刘诺然
  25. 25 寻一个你(电视剧《苍兰诀》温情主题曲) TTTTTeehom
  26. 26 子莫格尼 杉和
  27. 27 Cat Cafe Shoffy
  28. 28 风停了雨停了我们还拥抱着 Superluckyqi
  29. 29 寂寞沙洲冷 于潼
  30. 30 三国恋 王巨星
  31. 31 达尔文 林俊杰
  32. 32 有些 颜人中
  33. 33 小模样 张小只ya
  34. 34 是否 程响
  35. 35 楼顶上的小斑鸠 队长
  36. 36 笑场 薛之谦
  37. 37 还是分开 张叶蕾
  38. 38 修炼爱情 林俊杰
  39. 39 二零三 毛不易
  40. 40 雅俗共赏 许嵩
  41. 41 Serendipity 古瑞斯Graps/Zakiya晴子
  42. 42 就让这大雨全都落下·2023 刘大拿
  43. 43 老男孩 筷子兄弟
  44. 44 有何不可 许嵩
  45. 45 缓缓 杜宣达
  46. 46 好久不见 陈奕迅
  47. 47 爱的魔法(Cover 金莎) 封茗囧菌
  48. 48 在你的身边 盛哲
  49. 49 带我去找夜生活 告五人
  50. 50 假面舞会 很美味
  51. 51 STAY The Kid LAROI/Justin Bieber
  52. 52 我好想睡觉的 无敌西红柿
  53. 53 日不落(温柔版)
  54. 54 恋爱画板 锦零
  55. 55 7710 好乐无荒/尹露浠
  56. 56 给你呀(又名:for ya) 蒋小呢
  57. 57 Love Story Taylor Swift
  58. 58 Plain Jane(Remix 13z) 鱼幼微
  59. 59 晚风 7opy/BT07
  60. 60 拜托 孙晨
  61. 61 乌梅子酱 李荣浩
  62. 62 南半球与北海道 范倪Liu
  63. 63 星河万里 Rom邢锐
达尔文 - 蔡健雅
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

作词 : 小寒

作曲 : 蔡健雅

编曲 : 黄中岳

我的青春 也不是没伤痕

是明白爱是信仰的延伸

什么特征 人缘还是眼神

也不会预知爱不爱的可能

保持单身 忍不住又沉沦

兜着圈子来去有时苦等

人的一生 感情是旋转门

转到了最后真心的就不分

有过竞争 有过牺牲 被爱筛选过程

学会认真 学会忠诚 适者才能生存

懂得永恒 得要我们 进化成更好的人

我的青春 有时还蛮单纯

相信幸福取决于爱得深

读进化论 我赞成达尔文

没实力的就有淘汰的可能

我的替身 已换过多少轮

记忆在旧情人心中变冷

我的一生 有几道旋转门

转到了最后只剩你我没分

有过竞争 有过牺牲 被爱筛选过程

学会认真 学会忠诚 适者才能生存

懂得永恒 得要我们 进化成更好的人

有过竞争 有过牺牲 被爱筛选过程

学会认真 学会忠诚 适者才能生存

懂得永恒 得要我们 进化成更好的人

懂得永恒 得要我们 进化成更好的人

进化成更好的人

点击右上角即可分享
微信分享提示