Vue响应式原理

var Book = {
  name:"jsBook"
};

Object.defineProperty(Book, 'name', {
  enumerable: true,
  configurable: false,
  set: function (value) {
    this._name = `${value || "JavaScript编程思想"} `;
  },
  get:function() {
    return `《${this._name}》`;
  },

});
Book.name = null;
console.log(Book.name) // 《JavaScript编程思想》

var Person = {
  name:"smith",
  skill:"熟练使用Java"
};

let myReactive = function(obj, key , val) {
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: false,
    set: function (value) {
      val = value;
    },
    get:function() {
      return val;
    },
  });
}

Object.keys(Person).forEach(key => {
  myReactive(Person, key, Person[key])
})

Person.skill = "熟练使用JavaScript";
console.log(Person.name + Person.skill); // smith熟练使用JavaScript

function observe(value, cb) {
    Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))
}

class Vue {
    constructor(options) {
        this._data = options.data;
        observe(this._data, options.render)
    }
}
let app = new Vue({
    el: '#app',
    data: {
        text: 'text',
        text2: 'text2'
    },
    render(){
        console.log("render");
    }
})

/*initMixin就做了一件事情，在Vue的原型上增加_init方法，
* 构造Vue实例的时候会调用这个_init方法来初始化Vue实例
*/
export function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) { 
    const vm: Component = this;
    vm._self = vm
    /*初始化生命周期*/
    initLifecycle(vm)
    /*初始化事件*/
    initEvents(vm)
    /*初始化render*/
    initRender(vm)
    /*调用beforeCreate钩子函数并且触发beforeCreate钩子事件*/
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    /*初始化props、methods、data、computed与watch*/
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    /*调用created钩子函数并且触发created钩子事件*/
    callHook(vm, 'created')
  }
}

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  /*初始化props*/
  if (opts.props) initProps(vm, opts.props)
  /*初始化方法*/
  if (opts.methods) initMethods(vm, opts.methods)
  /*初始化data*/
  if (opts.data) {
    initData(vm)
  } else {
    /*该组件没有data的时候绑定一个空对象*/
    observe(vm._data = {}, true /* asRootData */)
  }
  /*初始化computed*/
  if (opts.computed) initComputed(vm, opts.computed)
  /*初始化watchers*/
  if (opts.watch) initWatch(vm, opts.watch)
}

/*初始化data*/
function initData (vm: Component) {

/*得到data数据*/
let data = vm.$options.data

/*遍历data对象*/
const keys = Object.keys(data)
const props = vm.$options.props
let i = keys.length

//遍历data中的数据
while (i--) {
  if (props && hasOwn(props, keys[i])) {
    process.env.NODE_ENV !== 'production' && warn(
      `The data property "${keys[i]}" is already declared as a prop. ` +
      `Use prop default value instead.`,
      vm
    )
  }
}
// observe data
/*通过observe实例化Observe对象，开始对数据进行绑定
* asRootData用来根数据，用来计算实例化根数据的个数
* 下面会进行递归observe进行对深层对象的绑定。则asRootData为非true
*/
observe(data, true /* asRootData */)
}

export class Observer {
constructor (value: any) {
  if (!Array.isArray(value))  {
    /*如果是对象则直接walk进行绑定*/
    this.walk(value)
  }
}

walk (obj: Object) {
  const keys = Object.keys(obj)
  /*walk方法会遍历对象的每一个属性进行defineReactive绑定*/
  for (let i = 0; i < keys.length; i++) {
    defineReactive(obj, keys[i], obj[keys[i]])
  }
}

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  vm.$el = el
  // 如果没有!vm.$options.render方法，就创建一个空的VNODE，不是生产环境啥的报错
  if (!vm.$options.render) {
    vm.$options.render = createEmptyVNode
    // 报错的代码
  }
  // 调用一下回调函数
  callHook(vm, 'beforeMount')
  // 定义一个updateComponent方法
  let updateComponent

  // 如果啥啥啥条件，那么updateComponent定义成如下方式，否则直接调用_update方法
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    updateComponent = () => {
      const name = vm._name
      const id = vm._uid
      const startTag = `vue-perf-start:${id}`
      const endTag = `vue-perf-end:${id}`
      
      // 在这里的核心调用来一下_render方法创建来一个vnode
      const vnode = vm._render()
      vm._update(vnode, hydrating)
    }
  } else {
      // 这里是定义的updateComponent是直接调用_update方法
    updateComponent = () => {
      vm._update(vm._render(), hydrating)
    }
  }

  // we set this to vm._watcher inside the watcher's constructor
  // since the watcher's initial patch may call $forceUpdate (e.g. inside child
  // component's mounted hook), which relies on vm._watcher being already defined
  
  // 实例化一个渲染watcher，用处是初始化的时候会执行回调函数，
  // 另一个是当 vm 实例中的监测的数据发生变化的时候执行回调函数
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)
  hydrating = false

  // 函数最后判断为根节点的时候设置 vm._isMounted 为 true， 表示这个实例已经挂载了，
  // 同时执行 mounted 钩子函数
  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  }
  return vm
}