Vue六大基本类型中的原始值响应式

Vue六大基本类型中的原始值响应式是指 Vue 对于 JavaScript 基本数据类型的响应式实现，包括 Number、String、Boolean 和 Symbol 四个类型的数据。

Vue 对于这些数据类型的响应式实现是通过 Object.defineProperty() 方法来实现的。当 Vue 检测到数据发生变化时，会调用数据的 setter 方法，将新值保存起来，并且通知使用该数据的组件进行更新。

下面是一个示例说明 Vue 对于 Number 数据类型的响应式实现：

<template>
  <div>
    <h1>{{ number }}</h1>
    <button @click="add">Add</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 0
    }
  },
  methods: {
    add() {
      this.number++;
    }
  }
}
</script>

在上述示例中，我们定义了一个数值类型的数据 number，然后在程序中给它赋了初值 0。在组件的模板中，我们使用双重花括号语法，将这个数值显示在了页面中。同时，我们还定义了一个方法 add，每次点击按钮时就会将 number 的值加一。此时，因为 Vue 实现了对于 Number 数据类型的响应式，所以每次 number 的值发生变化时，Vue 会自动检测到这个变化，并且通知到使用这个数据的组件，从而更新页面中显示的内容。

接下来是另一个示例，展示了 Vue 对于 String 数据类型的响应式实现：

<template>
  <div>
    <h1>{{ message }}</h1>
    <input v-model="message">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

在这个示例中，我们定义了一个字符串类型的数据 message，初始值为 “Hello, Vue!”。在组件的模板中，我们使用双重花括号语法，将这个字符串显示在了页面中。同时，我们还使用了 Vue 提供的 v-model 指令，将一个输入框绑定到了 message 数据上。这样，每当我们在输入框中修改 message 数据时，Vue 就会自动检测到这个变化，并且通知到使用这个数据的组件，从而更新页面中显示的内容。

在实际开发中，我们经常会使用到 Vue 对于原始值的响应式实现，因为它可以方便地管理我们的应用状态，同时又不需要手动去管理状态更新的逻辑，这样可以大大提高我们的开发效率。