Vue.js

外观

本页内容

响应式基础 ​

API 选项

本页和指南中后续的许多章节包含针对 Options API 和组合式 API 的不同内容。您的当前偏好是 Options API组合式 API。您可以通过左侧侧边栏顶部的“API 偏好”开关在 API 风格之间切换。

声明响应式状态 ​

使用 Options API，我们通过 data 选项声明组件的响应式状态。选项值应该是一个返回对象的函数。Vue 在创建新的组件实例时将调用该函数，并将其返回的对象包装在其响应性系统中。该对象的任何顶级属性都将代理到组件实例（在方法和生命周期钩子中是 this）。

js
export default {
  data() {
    return {
      count: 1
    }
  },

  // `mounted` is a lifecycle hook which we will explain later
  mounted() {
    // `this` refers to the component instance.
    console.log(this.count) // => 1

    // data can be mutated as well
    this.count = 2
  }
}

在游乐场尝试它

这些实例属性仅在实例首次创建时添加，因此您需要确保它们都包含在 data 函数返回的对象中。必要时，使用 null、undefined 或其他占位符值作为尚未提供所需值的属性。

可以直接向 this 添加新属性，而不将其包含在 data 中。然而，以这种方式添加的属性将无法触发响应式更新。

Vue 在通过组件实例公开其自己的内置 API 时使用 $ 前缀。它还保留了 _ 前缀以用于内部属性。您应避免为顶级 data 属性使用以这两个字符之一开头的名称。

响应式代理与原始 ​

在 Vue 3 中，通过利用 JavaScript Proxies 来使数据响应式。来自 Vue 2 的用户应该注意以下边缘情况

js
export default {
  data() {
    return {
      someObject: {}
    }
  },
  mounted() {
    const newObject = {}
    this.someObject = newObject

    console.log(newObject === this.someObject) // false
  }
}

在分配后访问 this.someObject，该值是原始 newObject 的响应式代理。与 Vue 2 不同，原始的 newObject 仍然保持原样，并且不会被使其响应式：请确保始终将响应式状态作为 this 的属性访问。

声明响应式状态 ​

ref() ​

在组合式 API 中，声明响应式状态的建议方法是使用 ref() 函数。

js
import { ref } from 'vue'

const count = ref(0)

ref() 接收一个参数，并返回一个具有 .value 属性的包装在 ref 对象中的值。

js
const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

另请参阅： 引用类型

要访问组件模板中的引用，请从组件的 setup() 函数中声明并返回它们。

js
import { ref } from 'vue'

export default {
  // `setup` is a special hook dedicated for the Composition API.
  setup() {
    const count = ref(0)

    // expose the ref to the template
    return {
      count
    }
  }
}
template
<div>{{ count }}</div>

请注意，在使用模板中的引用时，我们 不需要 添加 .value。为了方便，当在模板中使用时，引用将自动解包（有一些 注意事项）。

您还可以直接在事件处理程序中更改引用。

template
<button @click="count++">
  {{ count }}
</button>

对于更复杂的逻辑，我们可以声明在相同作用域中更改引用的函数，并将它们作为方法与状态一起公开。

js
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function increment() {
      // .value is needed in JavaScript
      count.value++
    }

    // don't forget to expose the function as well.
    return {
      count,
      increment
    }
  }
}

公开的方法然后可以用作事件处理程序。

template
<button @click="increment">
  {{ count }}
</button>

以下示例在 Codepen 上实时演示，不使用任何构建工具。

<script setup> ​

通过 setup() 手动公开状态和方法可能会很冗长。幸运的是，在使用 单文件组件 (SFCs) 时可以避免这种情况。我们可以通过使用 <script setup> 来简化使用。

vue
<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">
    {{ count }}
  </button>
</template>

在游乐场尝试它

在 `