vue2中的响应式数据

• vue2的响应式

  • 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)
  • 数组类型：通过重写更新数组的一系列方法来实现拦截。例如：push、splcie。。等方法

• 存在的问题

  • 新增属性，删除属性，界面不会跟新
  • 直接通过下标修改数组，界面不会自动更新

import { vue } from 'vue'
export default {
  data () {
    return {
      person: {
        name: '张三',
        age: 12
      },
      hobby: ['喝酒', '抽烟', '烫头']
    }
  },
  method: {
    //添加属性
    addSex () {
      // this.person.sex = "女"  这种方法添加属性，页面不会响应式更新
      //两中解决方案
      this.$set(this.person, 'sex', "女")
      Vue.set(this.person, 'sex', '女')
    },
    //删除属性
    deleteName () {
      // delete this.person.name 这种方法删除属性，页面不会响应式更新
      //两中解决方案
      this.$delete(this.person, 'name')
      Vue.delete(this.person, 'name')
    },
    //通过脚标修改数组
    changeHobby () {
      // this.hpbby[1] = '学习'  这种方法修改属性，页面不会响应式更新
      //解决方案
      this.hobby.splice(1, 1, '学习')
    }
  }
}