Object.defineProperty也能监听数组变化？

本文简介

点赞 + 关注 + 收藏 = 学会了

首先，解答一下标题：Object.defineProperty 不能监听原生数组的变化。如需监听数组，要将数组转成对象。

在 Vue2 时是使用了 Object.defineProperty 监听数据变化，但我查了下 文档，发现 Object.defineProperty 是用来监听对象指定属性的变化。没有看到可以监听个数组变化的。

但 Vue2 有的确能监听到数组某些方法改变了数组的值。本文的目标就是解开这个结。

基础用法

Object.defineProperty() 文档

关于 Object.defineProperty() 的用法，可以看官方文档。

基础部分本文只做简单的讲解。

语法

Object.defineProperty(obj, prop, descriptor)

参数

• obj 要定义属性的对象。
• prop 要定义或修改的属性的名称或 Symbol 。
• descriptor 要定义或修改的属性描述符。

const data = {}
let name = '雷猴'

Object.defineProperty(data, 'name', {
  get() {
    console.log('get')
    return name
  },
  set(newVal) {
    console.log('set')
    name = newVal
  }
})

console.log(data.name)
data.name = '鲨鱼辣椒'

console.log(data.name)
console.log(name)

上面的代码会输出

get
雷猴
set
鲨鱼辣椒
鲨鱼辣椒

上面的意思是，如果你需要访问 data.name ，那就返回 name 的值。

如果你想设置 data.name ，那