Vue 数据监听工作原理及三大重要模块分析

轩轩990218

于 2024-09-03 17:17:55 发布

阅读量393

点赞数 12

分类专栏： VUE系列文章标签： vue.js javascript 前端 typescript 前端框架

本文链接：https://blog.csdn.net/weixin_50883365/article/details/141866912

版权

VUE系列专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Vue 数据监听

在 Vue 中，数据监听是通过其响应式系统实现的。下面是其工作原理及代码示例：

一、工作原理

对象属性劫持：
- Vue 使用 Object.defineProperty() 方法来对数据对象的属性进行劫持（也称为代理）。当访问或修改这些被劫持的属性时，Vue 可以知道数据发生了变化。
- 对于每个属性，Vue 会设置 getter 和 setter 方法。当属性被读取时，会触发 getter；当属性被修改时，会触发 setter。
依赖收集与通知：
- 当 Vue 组件的模板在渲染时，会创建一个依赖收集的过程。如果一个数据属性在模板中被使用，Vue 会将这个模板的渲染函数（可以理解为一个依赖）与该属性关联起来。
- 当数据属性发生变化时，通过触发 setter，Vue 会通知所有与该属性相关联的依赖（即那些使用了这个属性的渲染函数或计算属性等）进行更新，从而实现界面的自动更新。

二、代码示例

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <p>{{ message }}</p>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    });

    // 模拟数据变化
    setTimeout(() => {
      app.message = 'New Message';
    }, 2000);
  </script>
</body>

</html>

在这个例子中，当创建 Vue 实例时，message 属性被设置为初始值 'Hello Vue!'。当页面渲染时，模板中的 {{ message }} 会触发对 message 属性的依赖收集。

当使用 setTimeout 模拟数据变化，将 message 的值改为 'New Message' 时，由于 message 属性的 setter 被触发，Vue 会通知所有依赖于 message 的地方进行更新，这里就是页面上显示 message 的 <p> 标签，从而实现了数据变化自动更新界面的效果。

在 Vue 中，mutations、watch和computed是非常重要的概念，它们在不同方面帮助管理和响应数据的变化。

Mutation 和 Watch 和 Computer 的概念

一、Mutations

概念：
- mutations是 Vuex 中用于更改状态的方法集合。所有对状态的更改都应该通过提交mutations来进行，这样可以确保状态的更改是可追踪和可测试的。

示例代码：

假设我们有一个 Vuex 存储，包含一个状态count和一个mutations方法来增加count。

// 创建 Vuex 存储
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

// 在 Vue 组件中使用
new Vue({
  el: '#app',
  store,
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    incrementCount() {
      this.$store.commit('increment');
    }
  }
});

二、Watch

概念：
- watch是 Vue 实例中的一个选项，用于监听数据的变化。当被监视的数据发生变化时，watch中的相应函数会被触发。

示例代码：

<div id="app">
  <input v-model="message">
</div>

new Vue({
  el: '#app',
  data: {
    message: ''
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`Message changed from ${oldValue} to ${newValue}`);
    }
  }
});

三、Computed

概念：
- computed是计算属性，它基于响应式数据进行计算，并缓存结果。只有当它依赖的响应式数据发生变化时，才会重新计算。

示例代码：

<div id="app">
  <p>Full Name: {{ fullName }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
});