Vue双向数据绑定原理-中

defineProperty方法

defineProperty除了可以动态修改/新增对象的属性以外, 还可以在修改/新增的时候给该属性添加get/set方法, 从而实现数据劫持。

defineProperty get/set方法特点

只要通过defineProperty给某个属性添加了get/set方法,那么以后只要获取这个属性的值就会自动调用get, 设置这个属性的值就会自动调用set。

!> 但是有一个注意点, 如果设置了get/set方法, 那么就不能通过value直接赋值, 也不能编写writable:true。

defineProperty get 方法

<script>
    let obj = {};
    let oldValue = "Example"
    Object.defineProperty(obj, 'name', {
        get() {
            console.log('get方法被执行了');
            return oldValue;
        }
    });

    console.log(obj.name);
</script>

image-20230930202458805

defineProperty set 方法

<script>
    let obj = {};
    let oldValue = "Example"
    Object.defineProperty(obj, 'name', {
        set(newValue) {
            if (oldValue !== newValue) {
                console.log("set方法被执行了");
                oldValue = newValue;
            }
        }
    });
    obj.name = 'BNTang'
</script>

image-20230930202623403

总结

通过上面的例子可以看出, 只要给某个属性添加了get/set方法, 那么以后只要获取这个属性的值就会自动调用get, 设置这个属性的值就会自动调用set。还有就是如果设置了get/set方法, 那么就不能通过value直接赋值, 也不能编写writable:true。

posted @   BNTang  阅读(62)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
  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邢锐
南半球与北海道 - 范倪Liu
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

作曲 : 陈抒妮

编曲 : 江潮/石峰

制作人 : 江潮

出品人 : 浅紫

当季节进入冷色调

月亮牵引着浪潮

我乘风航行星际轨道

接收 银河 赐予的讯号

你于花海肆意飘摇

时光定格你的笑

身影隐在云层的缥缈

遗憾 我的 指尖触摸不到

我告别南半球奔向北海道

愿化作那昼夜的飞鸟将你拥抱

等不到天空和海浪相互依靠

我会目送你随日落消失眼角

我告别南半球坠落北海道

脚步逆着人潮往你的方位奔跑

可惜两个时空等不到同一个破晓

最后只能带着回忆奔逃

当季节进入冷色调

月亮牵引着浪潮

我乘风航行星际轨道

接收 银河 赐予的讯号

你于花海肆意飘摇

时光定格你的笑

身影隐在云层的缥缈

遗憾 我的 指尖触摸不到

我告别南半球奔向北海道

愿化作那昼夜的飞鸟将你拥抱

等不到天空和海浪相互依靠

我会目送你随日落消失眼角

我告别南半球坠落北海道

脚步逆着人潮往你的方位奔跑

可惜两个时空等不到同一个破晓

最后只能带着回忆奔逃

我告别南半球奔向北海道

愿化作那昼夜的飞鸟将你拥抱

等不到天空和海浪相互依靠

我会目送你随日落消失眼角

我告别南半球坠落北海道

脚步逆着人潮往你的方位奔跑

可惜两个时空等不到同一个破晓

最后只能带着回忆奔逃

和声 : 范倪Liu

和声编写 : 江潮

吉他 : 齐成刚

混音 : 陈秋洁

封面 : 徐晓萌

策划 : 刘爽

营销推广 : 苏琦惠/徐飞扬@锤锤星球

总策划 : 王晶

特别鸣谢 : 凌联兴

出品公司 : 尘埃力量Stardust Alliance

(未经著作权人许可,不得翻唱、翻录或使用)

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