随笔记：Vue之对象响应式的简单实现

Vue之对象响应式的简单实现

1. 实现的效果

   1. 当对象的值改变时，界面上展示的值也会随之而改变。

2. 代码实现

   1.  //HTML结构
       <div id="app">123</div>
       
          <script>
              let obj = {
                  a: 'a',
                  b: 'b',
                  c: 'c'
              }
              app.innerHTML = JSON.stringify(obj);
              function walk(obj) {
                  let keys = Object.keys(obj);
                  for (let i = 0, l = keys.length; i < l; i++) {
                      defineProperty(obj, keys[i], obj[keys[i]])
                  }
              }
              walk(obj);
      
              function defineProperty(obj, key, val) {
                  // val = obj[key];
                  console.log(val);
                  Object.defineProperty(obj, key, {
                      enumerable: true,
                      configurable: true,
                      get() {
                          console.log(`get当前获取的属性值:${val}`);
                          return val
                      },
                      set(newVal) {
                          console.log(`set当前设置的属性值:${newVal}`);
                          val = newVal;
                          update();
                      }
                  })
              }
      
              // 更新视图
              function update() {
                  console.log(obj);
                  app.innerHTML = JSON.stringify(obj);
              }
          </script>
      

   2. 使用到的知识点

      1. Object.defineProperty(obj, prop, descriptor) 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

   `

   ​ 找到自己的生活、工作、学习的方式😁

   `