Object.assign触发watch原理示例解析

watch: {
	someObject(nvalue, ovalue) {
		...
	}
}
// 为对象添加新属性
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

this.someObject = Object.assign(this.someObject, { a: 1, b: 2 })

Vue.set(someObject, 'name', value)

this.$set(this.someObject,'name',2)

var obj = {};
var c = null
Object.defineProperty(obj, 'c', {
　　set:function(x){
　　　　console.log('c被赋值：',x);
　　　　c=x
　　},
　　get:function(){
　　　　console.log('c被取出：',c)
　　　　return c
　　}
})
obj.c=3  //c被赋值： 3
obj.c  //c被取出:  3
obj = Object.assign(obj, {c: 'wer23e'}) // 触发了set!
obj = Object.assign(obj, {a: 'wer23e'}) // 由于事先未用defineProperty定义a，所以无法监听
// 由于目标对象未定义属性，无法监听
obj = Object.assign({},obj, {a: 'wer23e',c: 'dfrr23e'}) 

if (typeof Object.assign !== 'function') {
  // Must be writable: true, enumerable: false, configurable: true
  Object.defineProperty(Object, "assign", {
    value: function assign(target, varArgs) { // .length of function is 2
      'use strict';
      if (target === null || target === undefined) {
        throw new TypeError('Cannot convert undefined or null to object');
      }
      var to = Object(target);
      for (var index = 1; index < arguments.length; index++) {
        var nextSource = arguments[index];
        if (nextSource !== null && nextSource !== undefined) {
          for (var nexTKEy in nextSource) {
            // Avoid bugs when hasOwnProperty is shadowed
            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
              to[nextKey] = nextSource[nextKey];
            }
          }
        }
      }
      return to;
    },
    writable: true,
    configurable: true
  });
}

<template>
 <div style="width: 100px; height: 50px; position: absolute; top: 100px" @click="clickme()"> 点我啊 {{ test.a }}</div>
</template>
<script>
export default {
	data() {
		test: { a: 3 },
	},
	watch: {
    test(n, o) {
      debugger
      console.log(n)
    }
  },
	methods: {
		clickme() {
      debugger
      this.test = Object.assign(this.test, { a: 1 })
      debugger
      this.test = Object.assign(this.test, { a: 1, b: 2 })
      debugger
      this.test = Object.assign({}, this.test, { a: 1, b: 2 })
    },	
}
}
</script>