npm init vite // 初始化项目
npm install // 安装项目依赖
npm run dev // 启动项目

import {createRouter, createWebHashHistory} from 'vue-router'

// createWebHashHistory 创建一个带有 hash 历史记录

const routes = [
	{
		path: '/',
		name: 'Home'
		component: () => import('path') // 组件路径
	}
	...
]

const router = createRouter({
	history: createWebHashHistory(),
	routes
})

export default router;

<router-link to="/"></router-link> <!-- 用于路由跳转 -->
<router-view></router-view> <!-- 用于显示路由 -->

import {createApp} from 'vue'
import App from './App.vue'
import router from './router/index'

const app = createApp(App) // 创建vue实例

app.use(router) // 使用路由文件

app.mount('#app') // 将 id 为 app 的页面挂在到实例上

setup是一个专门用于组合式 API 的特殊钩子函数, 要在组件模板中使用响应式状态, 需要在setup()函数中定义并返回, 当使用单文件组件时, 可以使用<script setup>来取代繁琐的setup()函数

ref()是用于创建响应式数据, 对于ref()返回的响应式数据我们需要用.value的方式才能获取和修改

<template>
	<div @click="add">{{ count }}</div>
</template>
<script setup>
import { ref } from 'vue'

const count = ref(0)
const add = () => {
    count.value++
}
</script>

在Vue3中计算属性可以脱离Vue的组件机制单独使用

• 创建一个只读的计算属性

  <script setup>
  import { ref, computed } from 'vue'
  const count = ref(1)
  const plusOne = computed(() => count.value + 1)
  
  console.log(plusOne.value) // 2
      
   plusOne.value++ // 报错
  </script>

• 创建一个可写的计算属性

  <script setup>
  import { ref, computed } from 'vue'
  const count = ref(1)
  const plusOne = computed({
      get: () => count.value + 1,
      set: (val) => {
      	count.value = val - 1
  	}
  })
  plusOne.value = 1
  console.log(count.value) // 0
  </script>

watchEffect()函数是一个立即执行的一个函数, 同时会响应式的追踪其依赖, 在依赖更改时会重新执行

<script setup>
import { watchEffect, ref } from 'vue'
const count = ref(0)
watchEffect(() => console.log(count.value)) // 输出 0
count.value++ // 输出 1
</script>