VUE3 + Vite + ts

码农小菲

已于 2023-07-12 15:03:20 修改

阅读量143

点赞数

分类专栏： vue 文章标签： vue

于 2023-07-11 16:12:23 首次发布

本文链接：https://blog.csdn.net/xbczrz/article/details/131660355

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

VUE3 + Vite

vue3官网链接
 Vite官网链接

安装、运行、vscode插件

安装、运行

npm init vite@latest
npm install
npm run dev

vscode插件：
- Vue Language Features
- TypeScript Vue Plugin
为什么 npm run dev 可以启动项目：
- 查找可执行文件然后执行
- 查找规则：先从本地的node_modules里找bin有没有vite可以执行的（.bin 目录里是一个个软链接），如果没有，就去npm install -g（全局包）里找，还没有就去环境变量里面找，如果还有没就报错。

模板语法

v- 开头都是vue 的指令
v-text ：显示文本
v-html ：展示富文本
v-if ：控制元素的显示隐藏（切换真假DOM）
v-show ：控制元素的显示隐藏（display none block Css切换）
v-on ：简写@ 用来给元素添加事件
v-bind 简写: 绑定元素的属性Attr
v-model ：双向绑定
v-for ：遍历元素
v-once ：性能优化只渲染一次
v-memo ：性能优化会有缓存

vue虚拟DOM 和 diff算法

虚拟DOM就是通过JS来生成一个AST节点树
diff算法：
- 无key: 替换、新增、删除
- 有key:前序对比算法、尾序对比算法、新节点如果是多出来的就挂载、旧节点如果是多出来就卸载、特殊情况乱序（最长递增子序列算法）

Ref全家桶

ref()：接受一个内部值并返回一个响应式且可变的 ref 对象
isRef(): 判断是不是一个ref对象
shallowRef: 创建一个跟踪自身 .value 变化的 ref，但不会使其值也变成响应式的;(只改变简单数据类型，不改变复杂数据类型)(不可以和ref一起使用)
triggerRef():强制更新页面DOM
customRef: 自定义ref ；是个工厂函数要求我们返回一个对象并且实现 get 和 set；适合去做防抖之类的

Reactive全家桶

Reactive(object)：用来绑定复杂的数据类型；返回一个对象的响应式代理。reactive 源码约束了我们的类型，只能传入object
readonly(): 拷贝一份proxy对象将其设置为只读
shallowReactive(): 只能对浅层的数据如果是深层的数据只会改变值不会改变视图

Ref 与 Reactive 区别

ref:支持所有的类型；reactive:只支持引用类型
ref：取值赋值都要加.value; reactive不需要

to全家桶

toRef: 如果原始对象是非响应式的就不会更新视图数据是会变的;如果原始对象是响应式的是会更新视图并且改变数据的
toRefs：批量创建ref对象；用于解构；
toRaw：将响应式对象转化为普通对象

响应式原理

vue2: 使用Object.definedProperty实现
vue3: 使用Proxy

computed 计算属性

计算属性就是当依赖的属性的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值
函数形式：只能取值不能修改
对象形式：可以修改也可以取值（get、set）

watch 侦听器

侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数
watch(参数一，参数二，参数三)
- 参数一：数据源；可以是： ref 、 reactive 、一个函数返回一个值、以上类型的值组成的数组 []
- 参数二：回调函数；(新值，旧值)
- 参数三：对象，options配置项；immediate：创建时立即触发回调；deep：深度遍历（reactive默认）；

watchEffect()

立即运行传入的一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。
let 返回值 = watchEffect(参数一，参数二)
- 第一个参数:运行的副作用函数;(用到几个监听几个而且是非惰性会默认调用一次)
- 第二个参数:可选的选项,用来调整副作用的刷新时机或调试副作用的依赖;
  - flush : pre(组件更新前执行)、sync(强制效果始终同步触发) 、post(组件更新后执行)
  - 调试 watchEffect:onTrigger
- 返回值:用来停止该副作用的函数

watch 和 watchEffect()区别

watch:懒执行副作用；能更明确知道是哪个依赖发生变化；可以访问当前值和旧值
watchEffect：非惰性；可以停止追踪；可以在调整副作用的刷新时机或调试副作用的依赖

computed 和 watch 区别

是否有缓存： computed有，watch没有
是否支持异步：computed不支持，watch支持

生命周期

用Vue3 组合式API 是没有 beforeCreate 和 created 这两个生命周期的;setUp替代
onBeforeMount()：读不到dom
onMounted():可以读取dom
onBeforeUpdate():获取更新之前的dom
onUpdated():获取更新之后的dom
onBeforeUnmount():组件卸载之前
onUnmounted():组件卸载之后
onErrorCaptured():在捕获了后代组件传递的错误时调用
onRenderTracked():调试钩子，当组件渲染过程中追踪到响应式依赖时调用
onRenderTriggered():调试钩子，当响应式依赖的变更触发了组件渲染时调用。

父子组件传值

父传子（defineProps）

父组件通过v-bind绑定一个数据
子组件通过 defineProps 接受传过来的值
- ts: defineProps<{title:string，data:number[]}>()
- 非ts: defineProps({title:{default:‘’,type:string},data:Array})
- ts特有默认值方式： withDefaults(defineProps<{title:string，data:number[]}>(),{title:“xx”,data:() => [1,2,3]})

子传父（defineEmits）

子组件是通过defineEmits派发一个事件
父组件接收子组件的事件

子组件暴露给父组件内部属性（defineExpose）

子组件通过 defineExpose暴露
父组件通过ref拿到

动态组件

让多个组件使用同一个挂载点，并动态切换，这就是动态组件
挂载点使用component标签，然后使用v-bind:is=“组件”
场景：tab切换

插槽

子组件中的提供给父组件使用的一个占位符 slot标签
父组件可以在这个占位符中填充任何模板代码，填充的内容会替换子组件的标签
匿名插槽：子： slot标签；父：v-slot
具名插槽：给插槽取个名字；一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中
- 简写 v-slot:xx 简写成 #xx
动态插槽:插槽可以是一个变量名
- #[xxx]

异步组件 & 代码分包 & suspense

异步组件:在大型应用中,可能需要将应用分割成小一些的代码块并且减少主包的体积,这时候就可以使用异步组件
代码分包:父组件引用子组件通过defineAsyncComponent加载异步配合import 函数模式便可以分包

suspense: 组件有两个插槽。它们都只接收一个直接子节点。default 插槽里的节点会尽可能展示出来。如果不能，则展示 fallback 插槽里的节点。

      <Suspense>
          <template #default>
              <Dialog>
                  <template #default>
                      <div>我在哪儿</div>
                  </template>
              </Dialog>
          </template>

          <template #fallback>
              <div>loading...</div>
          </template>
      </Suspense>

Teleport传送组件

将模板渲染到指定的dom节点，不受父级属性影响，但data、prop数据依旧能够使用
类似 react 的 Portal
使用方法：通过to 属性插入指定元素位置；disabled动态控制teleport
```
 <teleport :disabled="true" to='body'>
     <A></A>
  </teleport
```

keep-alive缓存

切换子组件的时候，将缓存数据下来，再次切换回来数据还在

  <keep-alive :include="" exclude=""  :max="">组件</keep-alive>
  <keep-alive :max="10">
     <component :is="view"></component>
   </keep-alive>

include:需要缓存的组件; exclude:不需要缓存的组件; max：最大缓存数据
生命周期变化:
- 初次进入：onMounted > onActivated
- 退出：onDeactivated
- 再次进入：onActivated

transition 动画组件

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡:
条件渲染、条件展示、动态组件、组件根节点
自定义 transition 过度效果，name属性自定义
过渡的类名：进入/离开过渡，有 6 个 class 切换
- v-enter-from、v-enter-active、v-enter-to、v-leave-from、v-leave-active、v-leave-to
自定义过度时间：duration
transition 生命周期8个：
- @before-enter 、@enter、 @after-enter、 @enter-cancelled、@before-leave、@leave、@after-leave、@leave-cancelled
appear
- 通过这个属性可以设置初始节点过度就是页面加载完成就开始动画对应三个状态
- appear-active-class、appear-from-class、appear-to-class

依赖注入 Provide / Inject

用于父组件向后代组件传递数据
类似react的useContext 上下文
provide:可以在祖先组件中指定我们想要提供给后代组件的数据或方法; provide(key,传递的数据)
inject:后代组件通过inject来接收数据；inject(key)

Mitt

用于兄弟组件之间传值
安装: npm install mitt -S
.main.ts 初始化
使用方法：通过emit派发， on 方法添加事件，off 方法移除，clear 清空所有
- import { getCurrentInstance } from ‘vue’
- const instance = getCurrentInstance()
- emit派发: const emit = () => { instance?.proxy?.$Bus.emit(‘自定义事件名’，值)}
- on监听： instance?.proxy?.$Bus.on(‘事件名’,(值) =>{})
- 监听所有： instance?.proxy?.$Bus.on(‘事件名’,(*) =>{})
- 移除监听事件：instance?.proxy?.$Bus.off(‘事件名’,Fn)
- 清空所有监听：instance?.proxy?.$Bus.all.clear()

TSX

安装插件：npm install @vitejs/plugin-vue-jsx -D
vite.config.ts 配置
- import vueJsx from ‘@vitejs/plugin-vue-jsx’;
- plugins: [vue(),vueJsx()]
修改tsconfig.json 配置文件
- “jsx”: “preserve”, “jsxFactory”: “h”,“jsxFragmentFactory”: “Fragment”

TSX使用

返回一个渲染函数； optionsApi ； setUp 函数模式
支持：v-model ； v-show ；
不支持：v-if ； v-for ；
v-bind：变更为直接赋值就可以使用；
v-on：变更为所有事件有on开头、事件名称首字母大写
props: 变更为类似reat
Emit派发：第二个参数中获取xx xx.emt(‘自定义事件名’，值)

unplugin-auto-import

配置完成之后使用ref reactive watch 等无须import 导入可以直接使用

深入V-model

v-model 其实是一个语法糖通过props 和 emit组合而成的
prop：value -> modelValue （父组件：v-model=xxx 子组件：definedPropsmodelValue:类型()）
emit: input -> update:modelValue； (父组件不要写啥，子组件：definedEmit([‘update:modelValue’]) emit(‘update:modelValue’,值))
支持多个 v-model （父组件：v-model：nnn=xxx 子组件：definedPropsmodelValue:类型,nnn:类型() definedEmit([‘update:modelValue’，‘update:nnn’]) ）

自定义指令 Directive

引入 import type { Directive } from ‘vue’
使用： let VXx:Directive<HTMLImageElement,string> = (el,binding) => {}
- 标签中：v-xx = mm
钩子函数(常用的)：mounted 、update、unmounted
参数：
- el：当前绑定的DOM 元素
- binding： instance：使用指令的组件实例；value：传递给指令的值；oldValue：先前的值；arg：传递给指令的参数；modifiers：包含修饰符

globEager 、glob

vite自带的导入图片
使用：import.meta.glob(‘…/xxx/x/.’) import.meta.globEager(‘…/xxx/xx/.’)

IntersectionObserver

异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的方法
可用于图片懒加载等
js 构造函数

globalProperties 定义全局函数和变量

由于Vue3 没有Prototype 属性，使用 app.config.globalProperties 代替然后去定义变量和函数

const app = createApp({})
app.config.globalProperties.$函数名 = () => {}
app.config.globalProperties.$变量 = '值'

组件中： 标签内：$变量  ts内: 从vue中引入getCurrentInstance  const app = getCurrentInstance  app?.proxy.$变量

过滤器

在Vue3 移除了，可以使用全局函数代替Filters

编写vue3插件

思路：
- 在一个单独的文件中创建并导出它
- 先定义一个.vue组件,将需要暴露的方法属性通过 definedExporse暴露出来
- 定义一个相关的ts文件,把插件的方法和属性注册到全局
  - export default {install:(app:App) => {}}
  - 导入.vue组件，createVNode(组件) 创建虚拟dom; render(vnode,document.body)将虚拟dom渲染到页面中
  - app.config.globalProperties 将方法或属性挂载到全局
- 在main.ts中进行注册
  - 导入app.use(组件)注册
  - TypeScript注册，必须要拓展ComponentCustomProperties类型才能获得类型提示
- - 使用：通过 getCurrentInstance 去使用

详解 Scoped 和 :deep 样式穿透

Scoped: 通过在DOM结构以及css样式上加唯一不重复标记：data-v-hash 的方式，以确保唯一
scoped渲染规则：
- 给HTML的DOM节点加一个不重复的 data 属性（如：data-v-123）来表示他的唯一性
- 在每句选择器的末尾（编译后生成的css语句）加一个当前组件的data属性选择器（如[data-v-123]）来私有化样式
- 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性
:deep 样式穿透 : 用来改变属性选择器的位置
- 例如改变el组件的样式时在scoped中不能直接修改，原因是他在进行PostCss转化的时候把元素选择器默认放在了最后
- :depp() 就是用来改变属性选择器的位置

css Style 完整特性 (slotted、globad)

插槽选择器：slotted :slotted(类名){}
- 使用场景：A组件中定义了插槽，父组件中通过v-slot传入模板代码；A组件像修改插槽传入的样式时可以使用
全局选择器：globad
- 之前想加入全局样式，是通过style标签不加 scoped
- 现在可以使用 :globad(xx){}
动态css
- 单文件组件的 style 标签可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上；div{ color:v-bind(变量)}
- 如果是对象 v-bind 加引号 v-bind(“变量.xx”)

nextTick

vue 更新dom是异步的，数据更新是同步的
当需要操作dom的时候，可以使用nextTick
nextTick 就是创建一个异步任务，那么它自然要等到同步任务执行完成后才执行；可以在状态改变后立即使用，以等待 DOM 更新完成
用法：
1. 回调函数： nextTick(() => { xxx })
1. async awit

unocss原子化

减少了css体积，提高了css复用
减少了起名的复杂度
增加记忆成本
最好用于vite,webpack属于阉割版功能很少

函数式编程，h函数

vue中写的template，经过一系列的编译最终生成VNode
h函数就是直接用来生成VNode的一个函数，省略了一系列的编译
h(参数一、参数二、参数三)
- 参数一：必填项，字符串（可以是html标签名、一个组件、函数组件）
- 参数二：可选的，对象（attribute、prop 、事件）
- 参数三：可选的，字符串/数组/对象(children 子节点)
例如：h(“h2”, null, “Hello World”)

环境变量

他的主要作用就是让开发者区分不同的运行环境，来实现兼容开发和生产
npm run dev 就是开发环境 npm run build 就是生产环境
Vite 在一个特殊的 import.meta.env 对象上暴露环境变量
- BASE_URL：部署时的URL前缀
- MODE：运行模式
- DEV：是否在dev环境
- PROD：是否是build 环境
- SSR：是否是SSR 服务端渲染模式
配置额外的环境变量：
- 在根目录新建env 文件、可以创建多个
  如：.env.development .env.production
- 修改启动命令
  在 package json 配置 --mode env文件名称