VUE 7-CSDN博客

本文链接：https://blog.csdn.net/2401_88624699/article/details/145640501

订单结算台 - 购物车结算

1. 跳转传递查询参数 mode="cart" 和 cartIds
2. 页面中 $route.query 接收参数
3. 调用接口，获取数据
4. 基于数据渲染

立即购买结算

1. 跳转传递查询参数
mode="buyNow", goodsId, goodsSkuId, goodsNum
2. 页面中 $route.query 接收参数
3. 调用接口，获取数据
4. 基于数据渲染
5. 未登录时，确认框的复用 (mixins混入)

提交订单并支付

1. 封装通用请求方法
2. 买家留言绑定
3. 注册事件，调用方法提交订单并支付

打包发布

说明：vue脚手架工具已经提供了打包命令，直接使用即可。
命令：yarn build
结果：在项目的根目录会自动创建一个文件夹`dist`, dist中的文件就是打包后的文件，只需要放到服务器中即可。
配置：默认情况下，需要放到服务器根目录打开，如果希望双击运行，需要配置publicPath 配成相对路径

打包优化：路由懒加载

说明：当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同
的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

使用create-vue创建项目
1. 前提环境条件
已安装 16.0 或更高版本的 Node.js
node -v
2. 创建一个Vue应用
npm init vue@latest
这一指令将会安装并执行 create-vue

关键文件：
1. vite.config.js - 项目的配置文件基于vite的配置
2. package.json - 项目包文件核心依赖项变成了 Vue3.x 和 vite
3. main.js - 入口文件 createApp函数创建应用实例
4. app.vue - 根组件 SFC单文件组件 script - template - style
变化一：脚本script和模板template顺序调整
变化二：模板template不再要求唯一根元素
变化三：脚本script添加setup标识支持组合式API
5. index.html - 单页入口提供id为app的挂载点

1. setup选项的执行时机？
beforeCreate钩子之前自动执行
2. setup写代码的特点是什么？
定义数据 + 函数然后以对象方式return
3. <script setup>解决了什么问题？
经过语法糖的封装更简单的使用组合式API
4. setup中的this还指向组件实例吗？
指向undefined

1. reactive和ref函数的共同作用是什么？
用函数调用的方式生成响应式数据
2. reactive vs ref ？
1. reactive不能处理简单类型的数据
2. ref参数类型支持更好但是必须通过.value访问修改
3. ref函数的内部实现依赖于reactive函数
3. 在实际工作中推荐使用哪个？
推荐使用ref函数，更加灵活统一

1. 计算属性中不应该有“副作用”
比如异步请求/修改dom
2. 避免直接修改计算属性的值
计算属性应该是只读的，特殊情况可以配置 get set

watch函数
作用: 侦听一个或者多个数据的变化，数据变化时执行回调函数
俩个额外参数：1. immediate（立即执行） 2. deep（深度侦听）

1. 作为watch函数的第一个参数，ref对象需要添加.value吗？
不需要，第一个参数就是传 ref 对象
2. watch只能侦听单个数据吗？
单个或者多个
3. 不开启deep，直接监视复杂类型，修改属性能触发回调吗？
不能，默认是浅层侦听
4. 不开启deep，精确侦听对象的某个属性？
可以把第一个参数写成函数的写法，返回要监听的具体属性

1. 组合式API中生命周期函数的格式是什么？
on + 生命周期名字
2. 组合式API中可以使用onCreated吗？
没有这个钩子函数，直接写到setup中
3. 组合式API中组件卸载完毕时执行哪个函数？
onUnmounted

组合式API下的父传子

1. 父组件中给子组件绑定属性
2. 子组件内部通过props选项接收

组合式API下的子传父

1. 父组件中给子组件标签通过@绑定事件
2. 子组件内部通过 emit 方法触发事件
父传子
1. 父传子的过程中通过什么方式接收props？
defineProps( { 属性名：类型 } )
2. setup语法糖中如何使用父组件传过来的数据？
const props = defineProps( { 属性名：类型 } )
props.xxx
子传父
1. 子传父的过程中通过什么方式得到emit方法？
defineEmits( [‘事件名称’] )
2. 怎么触发事件
emit('自定义事件名', 参数)

模板引用

通过ref标识获取真实的dom对象或者组件实例对象