Vue中的部分响应式

1. 组件的数据（data）：在Vue组件中使用data选项定义的数据是响应式的。当这些数据发生变化时，相关的视图会自动更新。

2. 计算属性（computed）：使用computed选项定义的计算属性是响应式的。它们基于其依赖的响应式数据进行计算，并在依赖数据变化时自动更新。计算属性的结果会被缓存，只有在依赖数据变化时才会重新计算。

3. 侦听属性（watch）：通过使用watch选项，你可以监听一个或多个响应式数据的变化。当被监听的数据发生变化时，可以执行相应的回调函数来进行相应的操作。

4. Props（父组件传递给子组件的属性）：当父组件将属性传递给子组件时，这些属性在子组件中也是响应式的。如果父组件的属性发生变化，子组件的相应属性也会更新。

5. Vue.observable()：通过使用Vue.observable()方法，你可以将一个普通的JavaScript对象转换为响应式对象。这在你需要创建自定义的响应式数据时非常有用。

 注意点：

需要注意的是，Vue只能追踪在Vue实例化时已经存在的属性。对于后期动态添加的属性，Vue无法自动将其转换为响应式的。如果需要动态添加响应式属性，可以使用Vue.set()方法或者使用this.$set()在组件中添加新属性。

Vue的响应式系统可以覆盖组件的数据、计算属性、侦听属性以及Props，使得数据的变化能够自动触发相关视图的更新，从而简化了开发过程。

<template>
  <div>
    <h1>{{ message }}</h1>
    <input v-model="inputText" />
    <p>输入的文本: {{ inputText }}</p>
    <p>计算属性长度: {{ textLength }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
      inputText: '',
    };
  },
  computed: {
    textLength() {
      return this.inputText.length;
    },
  },
  watch: {
    inputText(newValue, oldValue) {
      console.log('输入文本变化:', newValue);
    },
  },
};
</script>

 

1. data中的message属性：当message的值发生变化时，<h1>标签中的文本会自动更新。

2. data中的inputText属性和相关的<input>标签：使用v-model指令将输入框与inputText属性双向绑定。当用户在输入框中输入文本时，inputText属性会自动更新，并在模板中显示。

3. computed中的textLength属性：该计算属性依赖于inputText属性。当inputText发生变化时，textLength会自动重新计算，并在模板中显示。

4. watch中的inputText属性：通过watch选项，我们监听inputText属性的变化，并在变化时执行相应的回调函数。在控制台中打印出新的输入文本值。

这些部分共同构成了一个简单的Vue组件，其中的数据和计算属性是响应式的，当这些数据发生变化时，相关的视图会自动更新。