Vue和Vue-Element-Admin（十三）：基于vue2比较学习vue3

文章目录

• 开篇总结
• 1.创建 Vue3 工程
• • 1.1 【基于 vue-cli 创建】
  • 1.2 【基于 Vite 创建】（Vue 官方推荐）
  • 1.3 【基于 Vite 官方 create-vite 创建】
• 2.Vue3 语法核心
• • 2.1 【拉开序幕的 setup】
  • 2.2 ref 和 reactive 的学习
  • 2.3 toRefs、toRef、computed
  • 2.4 【watch】
  • • \*情况一：监视【ref】定义的 【基本类型】数据
    • \*情况二：监视【ref】定义的 【对象类型】数据
    • \*情况三：监视 【reactive】定义的【对象类型】数据，且默认开启了深度监视
    • \*情况四：监视 ref 或 reactive 定义的【对象类型】数据中的 某个属性
    • \*情况五：监视多个数据
  • 2.5【watchEffect】
  • 2.6【标签的 ref 属性】
  • 2.7 props
  • 2.8 Hooks
• 3.路由
• • 3.1 两个注意点
  • 3.2 RouterLink 中 to 的两种写法
  • 3.3 路由器的工作模式
  • 3.4 路由传参
  • • query 传参
    • parmas 传参
  • 3.5 路由的Props配置
  • 3.6 【replace属性】
  • 3.7 【编程式路由导航 和 重定向】
• 4.【pinia】（建议看官网）
• • 4.1 在Vue3项目中引入pinia
  • 4.2 官网的一个基础示例
  • 4.3 【定义一个Store】
  • • 【Option Store】
    • 【Setup Store】
  • 4.4【使用一个Store】
  • 4.5 【State】
  • • 重置 state
    • 变更 state
    • 订阅 state
  • 4.6 【Getter】
  • • getter 拿什么来计算？
    • 向 getter 传递参数
  • 4.7【Action】
  • • 订阅 action
• 5.组件通信
• • 5.1. 【props】
  • 5.2 【mitt】
  • 5.3 【v-model】
  • • 原生input上使用v-model
    • 在一个输入组件上使用v-model
  • 5.4【$attrs 】
  • 5.5 【\$refs、$parent】
  • 5.6 【provide、inject】
  • 5.7 【slot】
  • • 1. 默认插槽
    • 2. 具名插槽
    • 3. 作用域插槽
• 6.其它 API
• • 6.1【shallowRef 与 shallowReactive 】
  • • `shallowRef`
    • `shallowReactive`
    • 总结
  • 6.2【readonly 与 shallowReadonly】
  • • **`readonly`**
    • **`shallowReadonly`**
  • 6.3【toRaw 与 markRaw】
  • • `toRaw`
    • `markRaw`
  • 6.4【customRef】
• 7.Vue3新组件
• • 7.1 【Teleport】
  • 7.2 【Suspense】
  • 7.3【全局API转移到应用对象】
  • 7.4【其他】