巧用Object.assign在Vue中实现深度监视

Object.assign()函数是JavaScript内置的一个函数，用于将一个或多个源对象的属性复制到目标对象。它可以用来合并对象，也可以用来复制对象。在Vue.js中，我们可以使用Object.assign()函数来实现深度监视。

const obj = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    state: 'NY',
  }
}

Vue.set(obj, 'address.city', 'Los Angeles')

console.log(obj) // { name: 'John', age: 30, address: { city: 'Los Angeles', state: 'NY' } }

通过使用Vue.set()方法，我们可以更改对象的嵌套属性。这将触发Vue.js的响应式系统，并更新视图。然而，如果我们直接将一个新的对象赋值给嵌套属性，Vue.js将无法检测到这种变化，视图也不会更新。

obj.address = {
  city: 'Los Angeles',
  state: 'CA'
}

console.log(obj) // { name: 'John', age: 30, address: { city: 'Los Angeles', state: 'CA' } }

为了解决这个问题，我们可以使用Object.assign()函数。Object.assign()函数可以将一个或多个源对象的属性复制到目标对象。当我们使用Object.assign()函数来更新嵌套属性时，Vue.js将检测到这种变化，并更新视图。

Object.assign(obj.address, {
  city: 'Los Angeles',
  state: 'CA'
})

console.log(obj) // { name: 'John', age: 30, address: { city: 'Los Angeles', state: 'CA' } }

这是因为Object.assign()函数会触发Vue.js的响应式系统。当Object.assign()函数将一个新的对象赋值给嵌套属性时，Vue.js会检测到这种变化，并更新视图。

Object.assign()函数是一个非常有用的工具，它可以用来实现深度监视。深度监视是一种可以在嵌套对象中监视属性变化的技术。使用深度监视，我们可以确保当嵌套对象中的属性发生变化时，视图也会更新。