vue 2.0 数据绑定原理

vue2.0 中数据响应式原理:
 1: 对象类型: 通过Object.defineProperty() 对对属性的读取, 修改进行拦截(vue2.0 中数据响应式原理就是进行数据拦截)
 2: 数组类型: 通过重写更新数组的一系列方法来实现拦截, 对数组的变更进行包装。
    Object.defineProperty(data, 'count', {
       get() {

       },
       set() {

       }  // 两个方法
    })
  vue2.0 中存在问题: 
   1: 新增属性, 删除属性, 界面不会更新。
   2: 直接通过下标修改数组, 界面不会自动更新。

   对象类型: 做到数据响应化, 解决方法: 
   import vue form 'vue';
   export default({
     data() {
       return {
          persons:{
            name: "李明",
            age: 20
          }
       }
     },
     methods: {
       addSex() {
         this.$set(this.person, 'sex', '女');   // 第一种方法
         Vue.set(this.person, 'sex', '女');     // 第二种写法
       },
       // 删除对象身上某个属性
       deleteName() {      // 具有响应式删除
          this.$delete(this.person, 'name', '女');
          // 第二种方法
          vue.delete(this.person, 'name', '女');   // 在对象中删除某个属性(并且具有响应式的)
       },

       // 修改数组的数据具有响应式变化:
       updateHobby() {
         更新数组中的数据并且具有响应式:
         this.$set(this.person.hobby, 0, '逛街');
         vue.set(this.person.hobby, 0, '逛街');
         另外还可以调用数组身上的splice() 方法
         this.person.splice(0, 1. '逛街');
       }
     }
   })

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值