技术要求
TypeScript
Vue3
1、用Vue+Vue-Router做一个展示网站。网站按页面划分模块，每个页面按section（部分）再划分模块。培养自己的模块化思想。
2、用Vue+Vue-Router+Axios做一个带请求的网站。把请求结果放在页面上展示出来。锻炼请求接口的能力，了解前后端分离思想。
3、用Vue+Vue-Router+Axios+Vuex做一个能管理数据的网站。把请求放到Vuex中，用store管理数据。搞懂Vuex在开发中的帮助，提升项目开发能力。
做完上面三步你就已经入门Vue了，接下来就可以用这个最佳实践来构建更优雅的代码、组织更简洁的项目。
命令
pnpm create vue@latest
# 在项目目录下
npm outdated # 查看已过时的包
npm update # 更新包
基本语法
console.log('123') //ts里用单引号？1
响应式数据
ref基本类型的响应式数据
- 其实
ref接收的数据可以是：基本类型、对象类型。 - 若
ref接收的是对象类型，内部其实也是调用了reactive函数。
let xxx = ref(初始值)
// 一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的
注意：
JS中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。- 对于
let name = ref('张三')来说，name不是响应式的，name.value是响应式的
reactive：对象类型的响应式数据
基本类型不要用它，要用 ref，否则报错
let 响应式对象= reactive(源对象) //响应式对象
// 返回值：一个Proxy的实例对象，简称：响应式对象。
reactive定义的响应式数据是“深层次”的。
reactive重新分配一个新对象，会失去响应式
<template>
<h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
<h2>汽车信息：一台{{ car1.brand }}汽车，价值{{ car1.price }}万</h2>
</template>
<script lang="ts" setup name="Person">
import { ref,reactive } from 'vue'
let car=reactive({brand:'奔驰',price:100})
let car1=ref({brand:'本田',price:100})
function changeCar(){
car={brand:'奥迪',price:1}; //不会更新
car=reactive({brand:'奥迪',price:1}); //不会更新
Object.assign(car,{brand:'奥迪',price:1}); //可以操作reactive
car1.value={brand:'奥迪',price:1} //可以操作ref
}
</script>
computed
作用：根据已有数据计算出新数据（和 Vue2中的 computed作用一致）。
watch
- 作用：监视数据的变化（和
Vue2中的watch作用一致） - 特点：
Vue3中的watch只能监视以下四种数据：
ref定义的数据。reactive定义的数据。- 函数返回一个值（
getter函数）。- 一个包含上述内容的数组。
情况一：监视 ref定义的【基本类型】数据：直接写数据名即可，监视的是其 value值的改变。
<template>
<h1>情况一：监视【ref】定义的【基本类型】数据</h1>
<h2>当前求和为：{{ sum }}</h2>
<button @click="changeSum">点我sum+1</button>
</template>
<script lang="ts" setup>
import {ref, watch} from 'vue'
let sum = ref(0)
function changeSum(){
sum.value+=1
}
// 监视，情况一：监视【ref】定义的【基本类型】数据
const stopWatch= watch(sum,(newValue,oldValue)=>{
console.log('sum变化了',newValue,oldValue)
if(newValue>=10){
stopWatch()
}
})
</script>
情况二
监视 ref定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。
注意：
- 若修改的是
ref定义的对象中的属性，newValue和oldValue都是新值，因为它们是同一个对象。 - 若修改整个
ref定义的对象，newValue是新值，oldValue是旧值，因为不是同一个对象了。
情况三
监视 reactive定义的【对象类型】数据，且默认开启了深度监视。
情况四
监视 ref或 reactive定义的【对象类型】数据中的某个属性，注意点如下：
- 若该属性值不是【对象类型】，需要写成函数形式。
- 若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。
结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。
情况五
监视上述的多个数据
传递数据
props
生命周期
Vue 组件实例在创建时要经历一系列的初始化步骤，在此过程中 Vue 会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子。
生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后。
创建阶段： setup
挂载阶段： onBeforeMount 、 onMounted
更新阶段： onBeforeUpdate 、 onUpdated
卸载阶段： onBeforeUnmount 、 onUnmounted
路由
安装路由router插件
npm i vue-router
pinia
安装pinia插件
npm install pinia
// 操作src/main.ts
import {createPinia} from 'pinia' //引入pinia
const pinia = createPinia() // 创建pinia
app.use(pinia) //使用插件
axios
安装axios插件
npm i axios