vue中Vue.set()的使用以及对其进行深入解析

<template>
<div class="app">
      <ul>
        <li> 年龄：{{obj.age? obj.age: "无"}}</li>
      </ul>
      <button @click="add()">添加年龄属性</button>
      <button @click="show()">打印</button>
</div>
</template>
 
<script>
import Vue from 'vue'
export default {
  component:{},
  data() {
    return {
        obj:{ name:"Lena", id:1 },
    }
  },
  methods: {
    add(){
      this.obj.age= 20
    },
    show(){
      console.log('obj',this.obj)
    }
  }
}
</script>

add(){
      Vue.set(this.obj,'age', '20')
    },

<template>
<div class="app">
      <ul>
        <li> 年龄：{{obj.age? obj.age: "无"}}</li>
      </ul>
      <button @click="add()">添加年龄属性</button>
      <button @click="del()">删除年龄属性</button>
      <button @click="show()">打印</button>
</div>
</template>
<script>
import Vue from 'vue'
export default {
  component:{
 
  },
  data() {
    return {
        obj:{ name:"Lena", id:1 },
    }
  },
  methods: {
    add(){
      Vue.set(this.obj,'age', '20')
    },
    del(){
      Vue.delete(this.obj,'age')
    },
    show(){
      console.log('obj',this.obj)
    }
  }
}
</script>

export function set (target: Array<any> | Object, key: any, val: any): any {
  if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
  }
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, val)
    return val
  }
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid adding reactive properties to a Vue instance or its root $data ' +
      'at runtime - declare it upfront in the data option.'
    )
    return val
  }
  if (!ob) {
    target[key] = val
    return val
  }
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, val)
    return val
  }

if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }

const ob = (target: any).__ob__
  //如果是Vue实例，或者是根数据data的时候，就会报错。
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid adding reactive properties to a Vue instance or its root $data '+
      'at runtime - declare it upfront in the data option.'
    )
    return val
  }
 
  //如果本身就不是响应式的，只需要直接赋值即可。
  if (!ob) {
    target[key] = val
    return val
  }
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val