前端知识

核心方法属性

**data：****用于声明组件初始响应式状态的函数。**https://cn.vuejs.org/api/options-state.html#data

**props：****用于声明一个组件的 props。**https://cn.vuejs.org/api/options-state.html#props

• 关于 props：https://cn.vuejs.org/guide/components/props.html
• 所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。
• props 是「组件」的属性
• props 与 attributor 的区别：“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。

**computed：****用于声明要在组件实例上暴露的计算属性。**https://cn.vuejs.org/api/options-state.html#computed

**methods：****用于声明要混入到组件实例中的方法。**https://cn.vuejs.org/api/options-state.html#methods

**watch：用于声明在数据更改时调用的侦听回调。**https://cn.vuejs.org/api/options-state.html#watch

**emits：****用于声明由组件触发的自定义事件。**https://cn.vuejs.org/api/options-state.html#emits

• 事件：https://cn.vuejs.org/guide/components/events.html

expose：用于声明当组件实例被父组件通过模板引用访问时暴露的公共属性。https://cn.vuejs.org/api/options-state.html#expose

组合式 API

通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与<script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，<script setup>中的导入和顶层变量/函数都能够在模板中直接使用。

下面是使用了组合式 API 与<script setup> 改造后和上面的模板完全一样的组件：

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

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

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