揭秘Vue.js响应式系统：揭开 reactivity、ref和computed的秘密

前端

2023-12-03 11:50:03

在Vue.js中，响应式系统是实现组件状态变化后视图自动更新的关键。本文将带领你深入理解Vue.js响应式系统的运作原理，具体解析reactivity、ref和computed这三个重要特性。

Vue.js响应式系统原理

Vue.js通过ES6代理(Proxy)实现数据的劫持。当对响应式对象的属性进行访问或修改时，代理对象会拦截这些操作，并触发响应式系统进行一系列的更新。

getter劫持: 当访问响应式对象的属性时，代理对象会拦截该操作，并触发响应式系统收集依赖。依赖是指那些需要响应式对象更新时执行的函数，比如组件的渲染函数。
setter劫持: 当修改响应式对象的属性时，代理对象会拦截该操作，并触发响应式系统更新依赖。依赖的执行会重新计算组件的状态，从而触发视图的更新。

reactivity: 让数据触手可及

reactivity是Vue.js响应式系统的核心，负责劫持数据对象的属性访问与修改，并触发依赖的更新。在Vue.js中，所有响应式对象都是通过reactivity创建的，包括组件的数据对象。

举个例子，我们定义一个名为message的响应式对象：

const message = reactivity({
  text: 'Hello Vue!'
});

当我们修改message.text的值时，Vue.js会自动检测到变化，并触发依赖的更新。这使得组件可以始终保持与数据的一致性。

ref: 灵活的数据访问

ref是Vue.js中用于获取和修改响应式对象属性的工具。它允许我们以一种更加灵活的方式访问和修改数据。

使用ref时，我们需要先创建一个ref对象，然后将ref对象与响应式对象的属性关联起来。例如：

const message = reactivity({
  text: 'Hello Vue!'
});

const messageRef = ref(message.text);

现在，我们可以通过messageRef.value来获取和修改message.text的值：

console.log(messageRef.value); // 'Hello Vue!'
messageRef.value = 'Hello World!';

ref的另一个重要功能是它可以传递给组件的props。通过ref，父组件可以访问子组件的响应式数据，从而实现数据共享和通信。

computed: 基于响应式数据的计算属性

computed是Vue.js中用于定义计算属性的工具。计算属性的值是根据其他响应式数据的变化而计算得来的。

举个例子，我们定义一个计算属性uppercaseMessage，它将message.text的值转换为大写：

const message = reactivity({
  text: 'Hello Vue!'
});

const uppercaseMessage = computed(() => {
  return message.text.toUpperCase();
});

现在，当我们修改message.text的值时，uppercaseMessage的值也会自动更新。这使得我们可以轻松地定义一些依赖于其他响应式数据的属性，而无需手动更新它们。

案例分享:打造实时聊天应用

为了加深对Vue.js响应式系统的理解，我们一起来构建一个简单的实时聊天应用。在这个应用中，用户可以发送和接收消息。

首先，我们需要定义一个messages数组，用来存储所有的聊天消息：

const messages = reactivity([]);

然后，我们需要定义一个组件，用来显示聊天消息列表：

const MessageList = {
  template: `<ul><li v-for="message in messages">{{ message }}</li></ul>`
};

在这个组件中，我们使用了v-for指令来遍历messages数组，并显示每条消息的内容。

最后，我们需要定义一个组件，用来发送聊天消息：

const SendMessage = {
  template: `<input type="text" v-model="message" @keyup.enter="sendMessage">`,
  data() {
    return {
      message: ''
    };
  },
  methods: {
    sendMessage() {
      messages.push(this.message);
      this.message = '';
    }
  }
};