vue是如何进行监听数据变化的？

泡芙·草莓2023-11-11 10:12

Vue.js使用数据劫持（Data Observation）的方式来监听数据变化。

在Vue.js中，当创建Vue实例时，会将数据对象进行递归遍历，并使用Object.defineProperty方法对每个属性进行劫持。这样一来，当数据发生变化时，就能够在底层触发相应的get和set方法，从而实现监听数据变化的能力。当数据被修改时，Vue会通知相关的视图更新。

Vue2和Vue3是Vue.js的两个版本。

Vue2：
- Vue2是较早版本的Vue.js，也是目前较为广泛使用的版本。
- 使用的是基于原型链和getter/setter的数据劫持方式，通过Object.defineProperty对数据进行劫持。
- Vue2在性能和体积方面存在一些限制，并且在一些复杂场景下可能表现不佳。
Vue3：
- Vue3是Vue.js的最新版本，于2020年9月正式发布。
- 采用了基于Proxy的数据劫持方式，代替了Vue2中的Object.defineProperty。
- Vue3在性能和开发体验上有所优化，具有更好的运行时性能和更小的包体积。
- Vue3还引入了一些新特性，如Composition API、Fragment等，提供了更灵活和可组合的开发方式。

Vue3更换数据劫持方式的原因是，Proxy相较于Object.defineProperty具有更强大的能力和更好的性能。Proxy可以代理整个对象，而不仅限于属性的劫持，同时也可以监控数组的变化。

举例：

html 复制代码

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Hello World!'
    }
  }
}
</script>

在上述例子中，当点击按钮时，调用changeMessage方法修改了message的值，Vue会自动检测到数据变化并更新相关视图，将新值展示在页面上。这是因为Vue通过数据劫持监听到了message属性的变化，并进行了相应的响应式更新。