Vue.js 3 知识点积累

先看这个表格： 脚手架 vue-cli create-vue 构建项目 vite 打包代码 webpack rollup 脚手架：创建项目，选择性安装需要的插件，指定统一的风格，生成demo。 构建项

项目开发，一般都是在本地起一个服务，进行代码的运行和调试。前面几篇文章介绍到了，webpack 对项目进行编译打包，方便在浏览器上运行。 那么问题来了，怎么样让打包好的项目文件，在浏览器上运行起来呢？

webpack最重要的四大模块 入口起点：开始构建的起始文件。 出口文件：构建的文件，存放的位置、名称以及是否覆盖上一次构建文件等。 加载器loader：webpack只能理解 js和json 文件，

webpack最重要的四大模块:入口起点、出口文件、加载器loader、插件plugin 上一篇文章详细介绍过了入口起点、出口文件，不清楚的可以前往查看。 模块(moudules) webpack模块

在上一篇文章中，介绍到了webpack打包原理，知道了为什么要使用webpack打包，以及他的优缺点和他的进阶版工具Vite。 想要使用好webpack，必须明白其运行原理、核心配置、在具体项目中运用

在 TypeScript 中，type 和 interface 都可以用来定义和描述数据的结构，虽然它们的写法很相似，但在某些方面也存在一些区别。 定义： 1. 接口（interface）： 用于定义

关于 Pinia 可能你不太了解Pinia是啥，但是VueX肯定知道，他是vue全家桶成员之一，目前版本迭代到了VueX 4。根据当下的形势VueX 5是不会出来了，因为Vue官方的状态管理库已经更改

前端中的TS和JS，分别应用的是强类型和弱类型，下面主要是对这两种类型做介绍 类型 类型是编程的基础 1、类型是指数据的分类或种类。 2、类型值是指数据在内存中表示的不同类型。 3、类型在计算机中起着

定义数据是通过`ref或reactive`来定义的，刚开始使用数据时，可以确定数据的类型，但是在经过方法处理过后，你还能确定吗？所以知道常用的判断响应式数据的方法，还是很重要的`（有剑不用，和根本没有

v-model（支持多个v-model） 语法：v-model:自定义事件名 = "数据或方法" 结果： 新增指令v-memo  Vue 组件状态改变引起组件重新渲染，在大量元素的情况下，可能会导致性

readonly() 语法：readonly(响应式数据) 作用：将响应式数据变成只读的数据（深只读） 深只读：对象或者数组数据，全部都变成只读 结果： shallowReadonly() 语法：sh

ref 和 reactive 结果： toRef 不使用toRef()方法，存在的问题 结果： 使用toRef()方法（解决数据改变、视图不更新的问题） 结果： toRefs toRaw 结果：

watchEffect 只有一个回调函数，自动追踪函数中用到的数据，任何一个数据，变动一次就执行回调函数

后缀运算符 在Vue 3中，有两个后缀运算符：?和!，分别表示可选属性和非空断言。 ?可选属性：表示该属性是可选的，如果该属性不存在，不会引发错误。 在上面的代码中，当message对象存在text属

在Vue 3中，组合式API是一种新的API风格，可以让我们更好地组织和重用组件逻辑。与Vue 2的选项式API不同，组合式API没有像`created`、`mounted`、`beforeUpdat