vue3则可以把相关的功能代码抽离分割在一起，方便开发者快速阅读。
前提条件
熟悉命令行
已安装 15.0 或更高版本的 Node.js
为创建项目而准备
npm使用国内 淘宝镜像 的方法
一、通过命令配置
(1) 命令 :
npm config set registry https://registry.npm.taobao.org
(2) 验证命令
npm config get registry
如果返回https://registry.npm.taobao.org，说明镜像配置成功。
二、通过使用cnpm安装
(1) 安装cnpm
解决安装卡顿或无法安装：
# 注册模块镜像
npm set registry https://registry.npm.taobao.org
// node-gyp 编译依赖的 node 源码镜像
npm set disturl https://npm.taobao.org/dist
// 清空缓存
npm cache clean --force
// 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
(2) 使用cnpm
npm run serve
cnpm install --save axios
cnpm install --save querystring
cnpm install --save vue-router
node --version
npm config get registry
npm run serve
创建项目
pnpm create vite@latest 项目名称
// 启动项目
pnpm dev
安装路由组件
pnpm install vue-router@4
// 安装 element组件
pnpm install element-plus
// 安装另一部分插件
pnpm install -D unplugin-vue-components unplugin-auto-import
// 安装图标组件
pnpm install @element-plus/icons-vue
项目目录结构
n node modules 模块包 ( 通过 install 安装的包都在这个目录里面，项目运行的依赖 )
n public 公共资源 (json,Images)
n src 项目目录
n assets 静态资源
n components 组件
n App.vue 根组件
n main.ts 根函数入口，全局配置生效的地方
n index.html 入口HTML文件
n package.json 项目配置文件，项目的标题、版本，模块的版本等信息
n README.md 注释文件
n vite.config.js Vue 配置文件
Vue 使用一种基于 HTML的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML解析器解析。
组成三个部分 :
n 模板(视图) (Template)
n 脚本 (Script)
n 样式 (Style)
加载组件:
第一步: 引入组件 import MyComponentVue from './components/MyComponent.vue'
第二步: 挂载组件 components:{ MyComponentVue }
第三步: 显示组件
{{ message1 }} {{ message2 }}setup使用
l setup函数是 Composition API (组合API) 的入口。
l setup是启动页面后会自动执行的一个函数。
l 项目中定义的所有变量，方法等都需要在setup 中 。
l 在setup函数中定义的变量和方法最后都需要 return 出去，否则无法在视图层中使用。
l setup在created实例被完全初始化之前执行，所以在setup中不使用this。
l setup返回值的数据（方法）模板可以直接使用。
l setup有两个参数，props 和 context 。
l setup数据不具备响应式。
引入 依赖部件
花括号 { } 里面写入相关依赖部件名称 比如 ：
Import {reactive, ref, watch} from "vue"ref 作用
当ref 里的数值发生改变时，视图层会自动更新。
ref可操作基本数据类型，也可以操作复杂数据类型: 对象，数组 。。。
建议: ref用来操作基本数据类型: 数字，字符串
ref方法是让我们的简单类型数据变成响应式数据,ref包赛的数据，在改变的时候需要.value来获取
toRef 作用
toRef 也可以创建一个响应式数据。
ref 本质是拷贝粘贴一份数据，脱离了与原数据的交互。
ref 函数将对象中的属性变成响应式数据，修改响应式数据是不会影响到原数据,但是会更新视图层。
toRef 的本质是引用，与原始数据有交互，修改响应式数据会影响到原数据,但是不会更新视图层。
使用先需要引入 。
reactive函数
作用 : 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）；
toRefs
用于批量设置多个数据为响应式数据。
toRefs与原始数据有交互，修改响应式数据会影响到原数据,但是不会更新视图层。
toRefs还可以与其他响应式函数交互，更加方便处理视图层数据。
使用先需要引入。
const oldPen = {
serial: "B2",
color: "Red",
size: 16,
type: {
width: 96,
length: 36
}
}
const newPen = reactive(oldPen);
return {oldPen, newPen, ...toRefs(newPen), changeClick}
映射，可以省略对象名称，直接写出属性名称，比如：
oldPen: {{ oldPen.size }}
size : {{size}}
Computed ， 计算函数(计算属性)
与vue2一致，均是用来监听数据变化。
使用先需要引入。
{
return data.num1 + data.num2
})
return {...toRefs(data), sum}
}
}" _ue_custom_node_="true">
watch侦听器
与vue2一致，均是用来侦听数据变化的。
使用先需要引入。
// 响应式对象实例
const num1 = ref(0)
const num2 = ref(1)
// 监听方法 1 (对一个 ref 数据变化)
watch(num1, (newValue, oldValue) => {
console.log(newValue, oldValue)
})
// 监听方法 2 (对一个 ref 数据变化)
watch(num2, (newValue, oldValue) => {
console.log(newValue, oldValue)
})
// 监听方法 3 (对多个 ref 数据变化)
watch([num1, num2], (newValue, oldValue) => {
console.log(newValue, oldValue)
})
// 监听方法 4 (对 reactive 响应式数据的某个成员数值变化)
watch(() => target.users.old, (newValue, oldValue) => {
console.log(newValue, oldValue)
}, {immediate: true}) // {immediate: true} 页面一打开就开启监听
watchEffect
watchEffect如果存在的话，在组件初始化的时候就会执行一次用以收集依赖。
watch 可以获取到新值与旧值 (更新之前的值)，而 watchEffect 是拿不到的。
watchEffect 不需要指定监听的属性，他会自动的收集依赖，只要我们回调中用到了响应式的属性，那么当这些属性变更的时候，这个回调都会执行，而watch 只能监听指定的属性而做出变更
使用先需要引入。
shallowReactive
shallowReactive: 只能处理第一层数据
const t = shallowRef("A"); // 字符串类型
const n = shallowRef(0); // 整数类型
age++age : {{ age }}
job.money++ {{job.money}}
shallowRef
shallowRef: 只能处理基本类型数据 。。。
shallowRef: 只能处理基本类型数据 。。。
t+='.';n++
n:{{n}};
t:{{t}};
reactive 的作用是什么？与shallowReactive 相比起来考虑 。。。
组件之间的父子关系
(1) provide : 传送数据
父组件中使用 (传送数据)
provide('user',guest)
(2) inject : 接收数据
子组件中使用 (接收数据)
const user = inject('user')
vuex
l vue2一致
l 使用需要安装，引入
l 自动探测
// 安装 npm install vuex@next –save // cnpm install vuex@next --save //引入 import (useStore) from 'vuex'
生命周期函数
Ø onBeforeMount--在挂载开始之前被调用
Ø onMounted -- 组件挂载时调用
Ø onBeforeUpdate--数据更新时调用
Ø onUpdated--数据更改导致的虚拟DOM重新渲染，在这之后会调用该钩子
Ø onBeforeUnmount--在卸载组件实例之前调用
Ø onUnmounted--卸载组件实例后调用
Ø onErrorCaptured一-当捕获一个来自子孙组件的错误时被调用
Vue应用程序中有4个主要事件
n 创建一在组件创建时执行
n 挂载一DOM被挂载时执行
n 更新一当响应数据被修改时执行
n 销毁一在元素被销毁之前立即运行
插槽
组件要如何接收模板内容呢? 在某些场景中，我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。
元素是一个插槽出口(slot outlet)，标示了父元素提供的插槽内容(slot content)将在哪里被染。
总结
setup：setup函数是组合式API的入口点，它在组件实例化之前执行。你可以在setup函数中编写响应式状态、引入其他组合式API以及执行其他初始化逻辑。
ref：ref函数用于创建一个响应式的数据引用。它接受一个初始值，并返回一个可通过.value访问和修改的响应式对象。
reactive：reactive函数用于创建一个响应式的数据对象。它接受一个普通对象，并返回一个可以被Vue追踪的响应式代理对象。
computed：computed函数用于创建一个计算属性。它接受一个getter函数，并返回一个可读的计算属性。
watch：watch函数用于监听一个响应式状态或计算属性的变化，并执行相应的回调函数。
toRefs：toRefs函数用于将一个响应式对象转换为普通对象，其中每个属性都是一个独立的响应式引用。
toRef：toRef函数用于创建一个指向响应式对象属性的引用。它接受一个响应式对象和属性名，并返回一个只读的引用。
watchEffect：watchEffect函数用于执行一个响应式副作用函数，并自动追踪其依赖。当依赖发生变化时，副作用函数会被重新执行。
onMounted：onMounted函数用于注册组件实例被挂载到DOM后执行的回调函数。
onUpdated：onUpdated函数用于注册组件实例被更新后执行的回调函数。
onUnmounted：onUnmounted函数用于注册组件实例被卸载前执行的回调函数。
provide / inject：provide函数用于在组件树中向下传递数据，而inject函数用于在组件树中向上获取提供的数据。
nextTick：nextTick函数用于在下一次DOM更新循环之后执行回调函数。这在需要等待DOM更新后执行某些操作时非常有用。
