• Vue：（四）数据代理

    定义：通过一个对象代理另一个对象的属性的操作（读/写）

    Object.defineProperty数据代理

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <title>数据代理title>
    6.     
    7.   head>
    8.   <body>
    9.     <script type="text/javascript">
    10.       let number = 18
    11.       let person = {
    12.         name: '张三',
    13.         sex: '男',
    14.       }
    15.  
    16.       Object.defineProperty(person, 'age', {
    17.         // value: 18,
    18.         // enumerable: true, // 控制属性是否可以被枚举，默认是false
    19.         // writable: true, // 控制属性是否可以被修改，默认是false
    20.         // configurable: true, // 控制属性是否可以被删除，默认是false
    21.  
    22.         // 当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
    23.         get() {
    24.           console.log('有人读取age属性了')
    25.           return number
    26.         },
    27.  
    28.         // 当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
    29.         set(value) {
    30.           console.log('有人修改age属性了')
    31.           number = value
    32.         },
    33.       })
    34.       console.log(person)
    35.     script>
    36.   body>
    37. html>

    Vue 中的数据代理

    1. Vue 中的数据代理：
      1. 通过vm对象来代理data对象中属性的操作（读写）
    2. Vue 中数据代理的好处：
      1. 更加方便的操作data 中的数据
    3. 基本原理：
      1. 通过Object.defineProperty()把data 对象中所有属性添加到vm 上
      2. 为每一个添加到vm 上的属性，都指定一个getter/setter 方法
      3. 在gettet/setter内部去操作（读写）data中对应的属性
    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <title>Vue中的数据代理title>
    6.     <script type="text/javascript" src="../js/vue.js">script>
    7.   head>
    8.   <body>
    9.     <div id="root">
    10.       <h2>学校名称:{{name}}h2>
    11.       <h2>学校地址:{{address}}h2>
    12.     div>
    13.     <script type="text/javascript">
    14.       const vm = new Vue({
    15.         el: '#root',
    16.         data: {
    17.           name: '航空',
    18.           address: '西安',
    19.         },
    20.       })
    21.     script>
    22.   body>
    23. html>

    我是空谷有来人，谢谢大家支持！

  • 相关阅读:
    Redis有哪些数据结构？分别有哪些典型的应用场景？
    FPGA工程师是否有必要转ASIC设计工程师？哪个前景好？
    P20 JPopupMenu弹出菜单
    Spring Security
    国际海运详解：国际海运的发货方式有哪些?区别是什么?
    特斯拉被称为自动驾驶领域的苹果
    Docker网络详细说明
    Objective-C中的KVO
    在Vue中搭建前端监控日志
    【LeetCode:2786. 访问数组中的位置使分数最大 + 递归 + 记忆化缓存 + dp】
  • 原文地址：https://blog.csdn.net/weixin_41377877/article/details/127891236