Vue源码学习:手写Vue(一)—— observe

自己想写实现一个有Vue核心功能的迷你库,记录一下实现过程。

本系例代码是以此图为蓝本编写的
Vue源码学习:手写Vue(一)—— observe_第1张图片

0.我希望的我实例是这么创建 new HVue(options)

new HVue({
     
  data: {
     
    message: 'hvue'
  }
})

1.在项目根目录创建一个vue.js

class HVue {
     
  constructor(options) {
     
    this.$options = options
    this.$data = options.data

    this.observe(this.$data) // 实现$data响应式
  }
  observe(data) {
     
    if (!data || typeof data !== 'object') {
     
      return
    }
    // 获取data中所有的key,为所有的key添加响应式
    Object.keys(data).forEach(key => {
     
      // 单独创建一个函数是有目的,后续会有说明
      this.defineReactive(data, key, data[key])
    })
  }
  defineReactive(obj, key, val) {
     
    Object.defineProperty(obj, key, {
     
      get() {
     
        return val;
      },
      set(newVal) {
     
        if (newVal !== val) {
     
          val = newVal
          console.log(`${
       key}更新了,新值是:${
       val}`);
        }
      }
    })
    this.observe(val) // data对中的每个属性值也可能是对象,通过递归实现响应化
  }
}

2.到这里可以先测试一下代码,根目录下创建index.html

<body>
  <script src="./hvue.js"></script>
  <script>
    const app = new HVue({
     
      data: {
     
        message: 'hvue',
        foo: {
     bar: ''}
      }
    })
    app.$data.message = 'new message'
    app.$data.foo.bar = 'new bar'
  </script>
</body>

修改实例中$data的属性时,日志打印了,说明我们的数据劫持成功了,将来可以在这里实现让页面更新的代码。
Vue源码学习:手写Vue(一)—— observe_第2张图片
下面我们要做一些依赖收的工作,见一下篇。

源码地址
https://github.com/hxlTeam/hvue.git

你可能感兴趣的:(vue.js,前端)