【VUE3分步学】:响应式基础VUE3 到现在发展的已经很成熟，最近在重新整理 VUE3 的学习路径，把一些必要的重要的

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情

VUE3 到现在发展的已经很成熟，最近在重新整理 VUE3 的学习路径，把一些必要的重要的知识点做了总结分享出来，与大家一起学习。

项目创建与配置

创建 VUE3 项目的方法有很多种，这里介绍官方推荐的：

npm init vue@latest

根据提示一步步操作创建的即 VUE3 的版本。有一些方法默认创建的还是 VUE2 版本的，使用的时候要稍加注意。

响应式基础

这里我们主要记录响应式变量的使用，因为这点与 VUE2 的差距比较大。

组合式`API` VS 选项式`API`

组合式API：

通过 setup 方法定义并使用各种属性及方法。

选项式API：

也就是 vue2 中使用的那种选项式。通过导出 export default {} 对象，在其中定义并使用相应的属性及方法。

使用方法

（1）setup() 函数中定义并返回

这种多用于 HTML作为模块引入。

import { reactive } from 'vue'

export default {
  // `setup` 是一个专门用于组合式 API 的特殊钩子函数
  setup() {
    const state = reactive({ count: 0 })
    
    function increment() {
      state.count++
    }

    // 暴露 state 到模板
    return {
      state
      increment
    }
  }
}

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

(2) 通过 <script setup> 使用

通常单文件组件会这样用。

<script setup>
import { reactive } from 'vue'

const state = reactive({ count: 0 })

function increment() {
state.count++
}
</script>

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

声明式渲染

reactive() 适用于对象（数组、set、map）

import { reactive } from 'vue'

const counter = reactive({
  count: 0
})

console.log(counter.count) // 0
counter.count++

限制：

仅对对象类型有效（对象、数组和 Map、Set 这样的集合类型，而对 string、number 和 boolean 这样的原始类型无效。
不能随意替换响应式对象，这会导致对初始引用的响应性丢失。

ref() 接受值类型，返回一个包裹对象，并在 .value 属性下暴露内部值

import { ref } from 'vue'

const message = ref('Hello World!')

console.log(message.value) // "Hello World!"

这里有一点需要注意：因为reactive() 返回的是一个原始对象的 Proxy，它和原始对象是不相等的：

const raw = {}
const proxy = reactive(raw)

// 代理对象和原始对象不是全等的
console.log(proxy === raw) // false

只有代理对象才是响应式的，更改原始对象并不会触发更新，因此我们在使用响应式系统的最佳实践是仅使用你声明对象的代理版本。

【VUE3分步学】:响应式基础