Vue3.2 setup语法糖及Hook函数基本使用

Vue3.2 为了更方便地使用组合式 API，推出了 setup 语法糖及一系列 hook 函数。

setup语法糖

setup 语法糖是 Vue3.2 中引入的一种新的组件函数语法，它代替了 Vue2.x 中的 beforeCreate、created 等生命周期函数，使得我们能够更加方便有效地使用组合式 API，进一步提高了 Vue3.2 在开发体验和性能上的表现。

setup语法糖如何使用

我们可以在 Vue3.2 中使用如下的代码使用 setup 语法糖：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  setup() {
    const message = 'Hello Vue3.2!';
    return {
      message // 返回需要使用的变量或函数
    }
  }
}
</script>

在这个例子中，我们将 setup 函数作为组件导出的默认选项。在 setup 函数中，我们定义了一个常量 message，并且将其返回。这样，在模板 template 中就可以使用变量 message 来显示数据了。

setup语法糖的优点

Vue3.2 中采用 setup 语法糖的优点有以下几个方面：

组合式 API 极大地提高了代码可维护性；
由于 setup 函数的紧凑形式，使得我们能够更好地掌控代码结构；
组件创建更加便捷，无需过多关注生命周期函数，可以使用一个函数搞定所有的初始化，可以很好地适应函数式编程的概念。

Hook函数

模板引用

在 Vue3.2 中，我们可以使用 ref 函数来创建一个响应式的模板引用，这个 Hook 函数具体的使用方法是：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    const increment = () => {
      count.value++
    }
    return {
      count,
      increment
    }
  }
}
</script>

在这个例子中，我们创建了一个响应式的变量 count，并且初始值是 0。在 increment 函数中，我们将 count 的值加一。

计算属性

Vue3.2 中的 computed 函数叫做 computed Hook，具体的使用方法是：

<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ doubleCount }}</p>
    <button @click="increment">+1</button>
  </div>
</template>
<script>
import { ref, computed } from 'vue'
export default {
  setup() {
    const count = ref(0)
    const increment = () => {
      count.value++
    }
    const doubleCount = computed(() => {
      return count.value * 2
    })
    return {
      count,
      increment,
      doubleCount
    }
  }
}
</script>

在这个例子中，我们定义了一个计算属性 doubleCount，这个计算属性可以在模板中得到渲染。doubleCount 的值是 count 值的两倍。由于 doubleCount 受到 count 的影响，所以我们在 computed 中设置 count 为依赖项。

监听器

Vue3.2 中的 watch 函数叫做 watchEffect Hook，具体的使用方法是：

<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ doubled }}</p>
    <button @click="increment">+1</button>
  </div>
</template>
<script>
import { ref, watchEffect } from 'vue'
export default {
  setup() {
    const count = ref(0)
    const doubled = ref(0)

    watchEffect(() => {
      doubled.value = count.value * 2
    })

    const increment = () => {
      count.value++
    }
    return {
      count,
      increment,
      doubled
    }
  }
}
</script>

在这个例子中，我们使用 Vue3.2 中的 watchEffect 函数创建了一个 doubled 的监听器，当 count 变化时，doubled 也会发生相应的变化。