vue中的数据代理和监听

2023-11-06 07:53:20

在Vue中，data是一个对象，它包含了组件的状态和行为。Vue通过代理和监听data对象来实现数据绑定，即当data对象中的数据发生变化时，视图也会随之更新。

代理

Vue使用Object.defineProperty()方法将data对象中的属性代理到组件实例上。这意味着，当我们访问组件实例上的属性时，实际上是访问data对象中的属性。

const data = {
  name: 'John Doe'
}

const vm = new Vue({
  data
})

console.log(vm.name) // 'John Doe'

监听

Vue使用getter和setter方法来监听data对象中的属性。当我们访问data对象中的属性时，getter方法会被调用；当我们修改data对象中的属性时，setter方法会被调用。

const data = {
  name: 'John Doe'
}

const vm = new Vue({
  data,
  watch: {
    name(newValue, oldValue) {
      console.log(`Name changed from ${oldValue} to ${newValue}`)
    }
  }
})

vm.name = 'Jane Doe' // 'Name changed from John Doe to Jane Doe'

深度监听

默认情况下，Vue只监听data对象中的第一层属性。如果data对象中包含嵌套对象，则Vue无法监听这些嵌套对象的属性。为了监听嵌套对象的属性，我们需要使用深度监听。

const data = {
  user: {
    name: 'John Doe'
  }
}

const vm = new Vue({
  data,
  watch: {
    'user.name'(newValue, oldValue) {
      console.log(`User's name changed from ${oldValue} to ${newValue}`)
    }
  },
  deep: true
})

vm.user.name = 'Jane Doe' // 'User's name changed from John Doe to Jane Doe'