vue3响应式系统API介绍

最新推荐文章于 2025-04-28 11:45:06 发布

super_wanan

最新推荐文章于 2025-04-28 11:45:06 发布

阅读量689

点赞数 1

分类专栏： vue3 文章标签： javascript vue.js typescript

本文链接：https://blog.youkuaiyun.com/weixin_43867717/article/details/127207745

版权

本文介绍了Vue3中的响应式API，包括reactive的局限性，如何选择reactive与ref，以及toRefs、computed（可写计算属性）和watch侦听器的用法。在setup函数中，需要注意ref和reactive的使用场景，以及如何保持响应式链接的完整。此外，文章还探讨了响应式语法糖和可写计算属性的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下述介绍仅针对组合式API~

1. reactive

reactive是一个函数，接收一个对象，把对象数据转化为响应式对象并返回。（需要从vue中导入reactive函数）

<template>
  <div>{
   {
    state.name }}</div>
  <div>{
   {
    state.age }}</div>
  <button @click="state.name = '小华'">修改姓名</button>
</template>

<script>
import {
    reactive } from 'vue'
export default {
   
  setup () {
   
    const state = reactive({
   
      name: '小明',
      age: 18
    })
    return {
   
      state
    }
  }
}
</script>

我们也可以在同一个作用域下定义一个更新 state 的函数，并作为一个方法与 state 一起暴露出去：


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

<script>
import {
    reactive } from 'vue'
export default {
   
  setup() {
   
    const state = reactive({
    count: 0 })

    function increment() {
   
      state.count++
    }

    // 不要忘记同时暴露 increment 函数
    return {
   
      state,
      increment
    }
  }
}
</script>