vue如何监听数组变化

vue如何监听数组变化

先看这一段代码

// 拿到数组的原型
const oldArrayProperty = Array.prototype
// 创建一个新的对象,原型指向oldArrayProperty,这么做为的是不污染全局的Array原型
// Object.create 和 new Objcet() 的区别在知识库 前端知识点中有
const arrProto = Object.create(oldArrayProperty)

// 给arrProto增加方法,例如push
arrProto.push = function() {
	updateView() //这里触发更新视图
  Array.prototype.push.call(this, ..arguments) // 这里才是真正执行push方法
}

然后修改1-4中的代码

/* 模拟更新视图 -- 这个不变 */
function updateView() {
	console.log('视图更新')
}
const oldArrayPrototype = Array.prototyoe
const arrProto = Object.create(oldArrayPrototype)
// 这里没写全所有的数组方法
!!['push', 'pop', 'shift', 'unshift', 'splice', 'slice'].forEach(methodName => {
	arrProto[methodName] = function() {
    updateView() // 更新视图 
  	oldArrayPrototype[methodName].call(this, ...arguments)
  }
})
/* 监听对象属性 */
function observer(target) {
	// 只监听对象和数组
  if (typeof target !== 'object' || target == null) {
  	return target
  }
  
  // 对数组进行特殊处理
  // 这样,操作target是数组的时候,就是使用的是我们自定义的方法了
  if(Array.isArray(target)) {
  	target.__proto__ = arrProto
  }
  
  // 重新定义各个属性
  for (let key in target) {
  	defineReactive(target, key, target[key])
  }
}
/* 对属性重新定义,并且监听 -- 这个也不变 */
function defineReactive(target, key, val) {
  // 深度监听
  observer(val) // 因为val不一定是值,也可能是一个对象或数组
  
	Object.defineProperty(target, key, {
  	get() {
    	return val
    },
    set(newVal) {
    	if (newVal !== val) {
        // 深度监听 新增加的如果是对象和数组也要加入监听
        observer(newVal)
        // 设置新值
      	val = newVal
      }
      // 更新视图
      updateView()
    }
  })
}
  • 3
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论

打赏作者

行动很重要冲冲冲

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值