Vue源码解析 - 响应式原理与实现

最新推荐文章于 2023-10-07 00:31:57 发布

「已注销」

最新推荐文章于 2023-10-07 00:31:57 发布

阅读量240

点赞数 1

分类专栏： Vue 文章标签： vue源码 vue响应式

本文链接：https://blog.csdn.net/qq980421/article/details/89924145

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue响应式原理.
Vue响应式实现.

响应式原理

初学者可能都会有这么一个疑惑. “为什么在data数据发生变化的时候,页面会被重新渲染”. 这个问题的答案是Vue内部会遍历data里面所有的属性,并使用Object.defineProperty将这些属性全部转换为getter/setter。将来Vue内部可以通过Object.defineProperty追踪依赖,当有data里面的属性发生改变时会触发setter,我们可以在里面做响应式操作(例如：数据发生改变通知组件进行更新).

响应式实现

class MyVue {
  // 接收将来传进来的参数
  constructor (options) {
    this.$options = options;

    this.$data = options.data;

    // 数据响应式
    this.observe (this.$data);

    // created生命周期

    if(options.created)
    {
      options.created.call(this);
    }
  }

  observe (obj) {
    // 1. 判断传进来的东西是否是我们想要的内容.
    if (!obj && typeof obj === 'object') {
      return;
    }
    //2. 遍历该对象. 因为data里面可以存放很多个属性.
    Object.keys (obj).forEach (key => {
      // 做响应式
      this.defineReactive (obj, key, obj[key]);
    });
  }

  defineReactive (obj, key, value) {
    Object.defineProperty (obj, key, {
      get () {
        // 将来读取 obj.key时将会触发 getter
        return value;
      },
      set (newVal) {
        //判断新值与旧值是否一样,一样则不需要进行更新.
        if (value === newVal) {
          return;
        }
        value = newVal;

        console.log (`${key}属性更新了,更新的值为${value}`);
      },
    });
  }
}

使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="MyVue1.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      let vm = new MyVue({
        el: '#app',
        data: {
          name: 'HelloVue!',
        },
        created() {
          // 3ms之后修改name的值
          // 会触发 setter
          setTimeout(() => {
            this.$data.name = '你好,Vue';
          }, 3000);
        },
      });
    </script>
  </body>
</html>

效果演示:

打开html，在控制台窗口等待3秒将会提示 name属性更新了,更新的值为: 你好,Vue

「已注销」

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue源码解析 - 响应式原理与实现

Vue响应式原理. Vue响应式实现.响应式原理初学者可能都会有这么一个疑惑. “为什么在data数据发生变化的时候,页面会被重新渲染”. 这个问题的答案是Vue内部会遍历data里面所有的属性,并使用Object.defineProperty将这些属性全部转换为getter/setter。将来Vue内部可以通过Object.defineProperty追踪依赖,当有data里面的属...
复制链接

扫一扫