1. rective 创建一个响应式对象

2. ref 和 reactive

• vue 使用 proxy API创建响应式，但是 proxy 只能代理对象。
• ref 使用 defined
• reactive 使用 proxy
• ref 实际调用了 reactive API

此时产生的问题:

• reactive 性能更好，应该推荐用户使用 reactive。
• ref 实际调用 reactive，是不是代表：只需要 ref

1. 创建一个 useCount.js 文件，包含 变量 和 watch

// useCount.ts
import { ref, watch } from 'vue'

const count = ref(0)

const doubleCount = ref(0)

function handleChangeCount() {
  count.value++
}

watch(count, () => {
  doubleCount.value = count.value * 2
})

export function useCounter() {
  return {
    count,
    handleChangeCount,
    doubleCount,
  }
}

1. 使用 ref 创建一个响应式数据

<template>
  <div>{{ num }}</div>
</template>

<script setup>
import { ref } from 'vue'
const num = ref(0)
</script>

vue 最大的特点

1. 数据响应式
2. 模板语法

1. 项目搭建

两种方式

npm create vue@latest

实际区别（Vite 官方逻辑）：

🔥 1. 构建处理方式不同

assets/

• 会被 Vite 打包、压缩、指纹化（加 hash）
• 会参与 依赖分析、tree-shaking
• 被 import 时可以自动转成正确资源 URL

public/

• 完全不处理，原样复制到 dist
• 不加 hash，也不压缩
• 只能通过绝对路径访问：/xxx.png

1. 文本插值

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)

<template>
  <div>{{ name }}</div>
</template>

<script setup>
const name = "lorem";
</script>

1. pnpm create vite race -- --template vue-ts
2. pnpm create @eslint/config@latest
3. pnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
4. pnpm add vue-router@4
5. npm install tailwindcss @tailwindcss/vite

npm install swiper
// import Swiper JS
import Swiper from 'swiper';
// import Swiper styles
import 'swiper/css';