Vue3中的组合式API

在 Vue 组件中定义一个响应式的计数器：

这段代码是一个使用 Vue.js 框架的单文件组件（Single File Component，简称 SFC）。

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。

<script>
export default{
  data(){
    return{
      count:0
    }
  },
  methods:{
    addCount(){
      this.count++
    }
  }
}
</script>
<template>
  <button @click="addCount">{{ count }}</button>
</template>
<style scoped>
</style>

当这个组件被引入并渲染到页面上时，用户会看到一个按钮，上面显示数字 0。

每次点击按钮，数字就会增加 1，因为 addCount 方法会被触发，从而增加 count 的值。

这个简单的组件演示了 Vue.js 的响应式数据绑定和事件处理的基本用法。

接下来用vue3，实现上述代码:

<script setup>
import { ref } from 'vue'//在Vue工具库中引入ref工具，用于存放数据，ref可以实现数据绑定
const count = ref (0)//在ref工具中存入数据0，并且声明引用为Count
const addCount=()=>count.value++//创建函数将count里的数据自加1，ref中存放整型数字需要通过value获取
</script>
<template>
  <button @click="addCount">{{ count }}</button>

</template>
<style scoped>
</style>

代码从 Vue 库中导入了 ref 函数。ref 是 Vue 3 的响应式系统的一部分，用于创建一个响应式的引用（reference），它可以存储任何类型的数据。

再使用 ref 函数创建了一个响应式的引用，并将其初始化为数字 0。这个引用被命名为 count。在 Vue 3 的 Composition API 中，通过 .value 属性来访问或修改 ref 创建的响应式引用的值。

最后定义了一个名为 addCount 的函数。当这个函数被调用时，它会将 count 引用的值增加 1。这里使用了 JavaScript 的自增运算符 ++，它会将变量的值增加 1 并返回新的值。

组合式API：

在Vue 3中，setup()、ref、reactive 和 computed 是组合式 API（Composition API）的一部分。

它们提供了一种新的方式来组织和使用 Vue 组件的逻辑。

这些概念与 Vue 2 中的选项式 API（如 data、computed、methods 等）相比，提供了更多的灵活性和组织代码的能力。

1.setup()程序的入口

下面这段代码创建了一个组件。

当用户点击按钮时，会在控制台打印 "调用了getUsername"，并且组件会显示用户名 'Tom'。

<script>
export default{//对外暴露代码块，可以被外部访问
  setup(){
    console.log('调用了setup')
    const username= 'Tom'
    const getUsername=()=>{
      console.log("调用了getUsername")
    }
    return{
      username,
      getUsername
    }
  },
  beforeCreate(){//在页面文件加载之前调用
    console.log('调用了beforeCreate')
  }
}
</script>

<template>
  <button @click="getUsername">{{ count }}</button>
  {{ username }}
</template>
<style scoped>
</style>

使用 setup关键字可同样完成上述效果，代码更加简洁：

setup() 函数是 Vue 3 组合式 API 的入口点。

它在组件实例创建之前执行，并且可以访问组件的所有属性（props）、上下文（context）和生命周期钩子。 在 setup() 函数中，你可以定义响应式状态、计算属性、方法等，并且它们可以被模板或其他组件逻辑直接使用。

setup() 函数返回的值可以在模板中直接使用，或者通过 return 语句返回的对象中的属性来访问。

<script setup>
    console.log('调用了setup')
    const username= 'Tom'
    const getUsername=()=>{
      console.log("调用了getUsername")
    }
</script>

<template>
  <button @click="getUsername">{{ count }}</button>
  {{ username }}
</template>
<style scoped>
</style>

2.reactive和ref存放数据的函数，可实现数据绑定

(1).reactive:存放对象类型数据，可以返回该对象

reactive() 函数用于创建一个响应式的复杂数据类型（如对象或数组）。

它接受一个普通 JavaScript 对象，并返回该对象的响应式代理。

与 ref() 不同，reactive() 返回的是原始数据的响应式代理，所以你可以直接操作这个代理，而不需要通过 .value 属性。

<script setup>
//reactive函数
//导入该函数
import {reactive} from 'vue'
//使用reactive
const state = reactive({count:0})
//创建事件函数对reactive的的值自加
const setCount=()=>{
  state.count++//reactive存放的数据不需要使用value调用，元素中需要通过对象名称调用
}
</script>
<template>
  <button @click="setCount">{{ state.count }}</button>
</template>
<style scoped>
</style>

(2).ref:存放简单类型或对象类型的数据，返回一个对象

ref() 是一个函数，用于创建一个响应式的引用对象。

它通常用于处理基本数据类型（如字符串、数字）的响应式状态。

ref() 返回一个对象，其中 .value 属性指向实际的数据。

在模板中使用时，Vue 会自动解包 ref，所以你可以直接使用 ref 的值，而不需要访问 .value。

<script setup>
//ref函数
import {ref,reactive} from 'vue'
const count = ref (0)
const setCount=()=>{
  count.value++//ref存放的简单类型数据，需要通过value属性调用，元素中可以直接使用引用名
}
</script>
<template>
  <button @click="setCount">{{ count }}</button>
  <!-- {{ username }} -->
</template>
<style scoped>
</style>

3.computed：计算属性

computed() 是一个函数，用于创建计算属性。

计算属性是基于它们的响应式依赖进行缓存的，只有当依赖发生变化时，计算属性才会重新计算。

computed() 接受一个函数，该函数定义了计算属性的逻辑，并返回一个对象，其中包含 get 和 set 方法。

在模板中使用计算属性时，Vue 会自动调用 get 方法获取值。

<script setup>
//computed计算函数
import { computed, ref } from 'vue';
const list = ref([1,2,3,4,5,6,7,8,9])
//通过计算函数对象数组中的数据进行计算
const computedList = computed(()=>{
  return list.value.filter(item=>item>2)
})
</script>
<template>
    {{ list }}
    {{ computedList }}
</template>
<style scoped>
</style>

4.App.vue源代码：

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

<style scoped>
header {
  line-height: 1.5;
  max-height: 100vh;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>