vue学习笔记7

打包发布 

目标：明确打包的作用

说明：vue脚手架只是开发过程中，协助开发的工具，当真正开发完了 => 脚手架不参与上线

打包的作用：

将多个文件压缩合并成一个文件，语法降级，less sass ts 语法解析

打包命令

打包后，可以生成，浏览器能够直接运行的网页 => 就是需要上线的源码！

命令：yarn build

结果：在项目的根目录会自动创建一个文件夹`dist`, dist中的文件就是打包后的文件，只需要放到服务器中即可。

配置：默认情况下，需要放到服务器根目录打开，如果希望双击运行，需要配置publicPath 配成相对路径

打包优化：路由懒加载

目标：配置路由懒加载，实现打包优化

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

步骤1： 异步组件改造

步骤2： 路由中应用

Vue3的优势

Vue2 选项式 API vs Vue3 组合式API

需求：点击按钮，让数字 +1

高级软件

setup选项的写法和执行时机

高级软件人才培训专家

<script setup> 语法糖

原始复杂写法

语法糖写法

reactive()

作用：接受对象类型数据的参数传入并返回一个响应式的对象

核心步骤

1. 从 vue 包中导入 reactive 函数

2. 在 <script setup> 中执行 reactive 函数并传入类型为对象的初始值，并使用变量接收返回值

ref()

作用：接收简单类型或者对象类型的数据传入并返回一个响应式的对象

核心步骤：

1. 从 vue 包中导入 ref 函数

2. 在 <script setup> 中执行 ref 函数并传入初始值，使用变量接收 ref 函数的返回值

computed计算属性函数

计算属性基本思想和Vue2的完全一致，组合式API下的计算属性只是修改了写法

核心步骤：1. 导入computed函数

2. 执行函数 在回调参数中return基于响应式数据做计算的值，用变量接收

watch函数

作用: 侦听一个或者多个数据的变化，数据变化时执行回调函数

俩个额外参数：1. immediate（立即执行） 2. deep（深度侦听）

基础使用 - 侦听单个数据

1. 导入watch函数

2. 执行watch函数传入要侦听的响应式数据(ref对象)和回调函数

immediate

说明：在侦听器创建时立即触发回调, 响应式数据变化之后继续执行回调

deep

默认机制：通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep选项

Vue3的生命周期API （选项式 VS 组合式）

生命周期函数基本使用

1. 导入生命周期函数

2. 执行生命周期函数 传入回调

执行多次

生命周期函数是可以执行多次的，多次执行时传入的回调会在时机成熟时依次执行

组合式API下的父传子

基本思想

1. 父组件中给子组件绑定属性

2. 子组件内部通过props选项接收

defineProps 原理：就是编译阶段的一个标识，实际编译器解析时，遇到后会进行编译转换

defineExpose()

默认情况下在<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的，

可以通过defineExpose编译宏指定哪些属性和方法允许访问

 

Vue3.3新特性-defineOptions

在 Vue 3.3 中新引入了 defineOptions 宏。顾名思义，主要是用来定义 Options API 的选项。可以用

defineOptions 定义任意的选项， props, emits, expose, slots 除外（因为这些可以使用 defineXXX 来做到）

 

Vue3 中的 v-model 和 defineModel

在Vue3中，自定义组件上使用v-model, 相当于传递一个modelValue属性，同时触发 update:modelValue 事件

我们需要先定义 props，再定义 emits 。其中有许多重复的代码。如果需要修改此值，还需要手动调用 emit 函数。