vue3 个人知识记录（补修知识点）

当前记录，仅作个人知识补充：

1，创建vue项目方式，除命令行外，  可以使用 vue ui 命令开启可视化工具创建 （在脚手架安装完成情况下）

2，路由， 使用先构建routes，后续创建，非将其直接写在createRouter方法中；其次，不再在文件头部进行组件的导入，而使用箭头函数 + import的方式。

图示1

3，ref 声明的基本数据类型，需要 .value 才能获取得到值

4，组件上使用class补充到固定的子dom结构的class上

子组件 父组件，切记父组件style不能添加scoped

5，使用事件修饰符stop实现点击某子项dom不往父级传递点击动作；使用事件修饰符self则仅点击父级剩余区域产生父级事件

6，键盘修饰符

键盘修饰符可组合

使用.exact 修饰键盘组合

7，组件props传参可使用validator函数自定义检验函数，但仅限于在浏览器控制器窗口弹出警告，如果采用的ts编码，则在定义传参类型时，在编码传入的时候就可以获得错误提示，虽然程序任然可以运行

8，插槽使用

子组件，Header footer 为具名插槽，需要在父级组件调用时指明位置，没有设置名称的都为默认插槽 父组件，使用v-slot=”header” 或 #header 设置插槽匹配， #default 和其他默认的dom二者存一，都设置的是默认插槽

插槽传递的数据均由父级组件提供

9，使用provide/inject传递数据的方式，避免对象深层次嵌套

父组件 provide(‘age’, 18)  // ==>  18 可以是动态监听的数据

子组件 const age = inject(‘age’)

10，组合式函数规范

示例 使用

(1) 注意事项：

① 组合式函数我们使用use...作为开头；

② 传入的参数我们需要对数据类型进行处理，用于区别是否需要动态监听，即处理Ref类型；

③ 函数内容返回的数据，建议使用多个ref的形式输出对象，而非使用reactive

        1) 有利于解构

        2) 有利于控制内外数据的连接性

(2) 组合函数的组合有利于页面内容的组合和拆解，有利于业务逻辑的易理解化

(3) 与无渲染组件相比，组合式api性能更优，没有额外的组件嵌套影响性能，所以在没有视图渲染任务中，推荐使用组合式api

11，全局自定义变量方法【js】

定义 注册 使用

12，全局自定义变量方法【ts】

定义 注册 使用 优化步骤1 优化步骤2

13，过渡效果和动画【Transition\TransitionGroup】

(1) Vue3内置支持，自定义过渡和动画前可以使用https://csstriggers.com/ 查看css是否会引发浏览器dom结构变化；

(2) 如果动画由js触发，例如生命钩子函数，建议 添加:css=”false”，跳过对css过渡的自动检测；

(3) 过渡效果服用，可结合插槽使用即可

(4) 其他：还支持 出现时过渡、元素间过渡、过渡模式、组件间过渡、动态过渡等

14，使用Teleport 组件，将动态渲染的内容固定到指定dom层级上进行渲染

15，父子组件使用props传值时，需要保持props的稳定性，例如子组件使用 v-for=”item in list”:isActive-id=”ActiveId”，当ActiveId更新时，所有的子组件都将进行检查更新，这里应该写为 :isActive=”item.id == ActiveId”

16，v-loack 用于隐藏尚未完成编译的 DOM 模板，解决“未编译模板闪现”的情况【页面中事先出现“{{ }}”的情况】

17，v-memo 用于v-for长列表渲染时的性能优化

18，v-pre 跳过该元素及其所有子元素的编译，保持原样输出，例如 “{{ 我将输出双大括号的的内容 }}”将输出大括号

19，渲染函数，vue除了模板编译方式，还提供了能高度动态要求渲染函数。【vue模板语法实质是会被编译器预编译为虚拟dom的渲染函数】

(1) 模板语法：结构化，易于理解重用修改等；有利于编译器的性能优化；

(2) 渲染函数当前无法在<scripte setup> 模式下使用；