Vue3学习-day2

最新推荐文章于 2025-12-04 20:16:23 发布

原创最新推荐文章于 2025-12-04 20:16:23 发布 · 419 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #vue.js #前端

组合式API：reactive和ref函数

reactive()

App.vue

<script setup>
// reactive: 接收一个对象类型数据，返回一个响应式的对象
// 问题：如果遇到简单类型(不是对象类型)怎么办呢？
import { reactive } from 'vue'
const state = reactive({
  count: 100
})
const setCount = () => {
  state.count++
}
</script>

<template>
  <div>{{ state.count }}</div>
  <button @click="setCount">+1</button>
</template>

ref()

App.vue

<script setup>
// 1.reactive: 接收一个对象类型数据，返回一个响应式的对象
//     问题：如果遇到简单类型(不是对象类型)怎么办呢？
// import { reactive } from 'vue'
// const state = reactive({
//   count: 100
// })
// const setCount = () => {
//   state.count++
// }

// 2.ref: 接收简单类型 或 复杂类型(对象类型)，返回一个响应式对象
//   本质： 是在原有传入数据的基础上，外层包了一层对象，包成了复杂类型
//   底层： 包成复杂类型之后，再借助 reactive 实现的响应式
//   注意：
//    1. 在script(脚本)中，访问数据，需要通过 .value
//    2. 在template(模板)中，不需要.value(帮我们扒了一层)

//  推荐：以后生命声明数据统一用 ref => 统一编码规范
import { ref } from 'vue'
const count = ref(0)
const setCount = () => {
   count.value++
}
</script>

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