qq_32849999的博客

背景：公司项目的每一个页面基本上都有el-form。而且不同的el-form里面有部分el-form-item是相同的，于是就想把这部分相同的el-form-item封装成一个el-form即组件d2-page-form。为什么要封装成一个el-form？d2-page-form是页面原来的el-form的子组件。在封装组件A的过程中，又想到了把el-form二次封装，这样就可以满足页面中不再写el-form、el-form-item的html代码了，直接封装一个组件，给组件传入对应的属性就可以了。....

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar

考察重点数据驱动视图状态：数据结构设计（React - state, Vue - data）视图：组件结构和拆分数据结构设计用数据描述所有的内容数据要结构化，易于程序操作（遍历、查找）数据要可扩展，以便增加新的功能组件设计从功能上拆分层次尽量让组件原子化，吸收系统的复杂度容器组件（只管理数据，一般是最外层的顶级组件，比如下面红色框组件）& UI 组件（只显示视图，不管功能实现，事件触发后抛出到容器组件处理。比如下面的蓝框和红框）...

v-show 和 v-if 的区别v-show 通过 CSS display 控制显示和隐藏v-if 组件是真正的渲染和销毁，而不是显示和隐藏频繁切换显示状态用 v-show ,否则用 v-if为何在 v-for 中用 key必须用 key,且不能是 index 和 randomdiff 算法中通过 tag 和 key 来判断，是否是 sameNode，从而让 diff 算法 减少渲染次数，提升渲染性能描述 Vue 组件生命周期（父子组件）单组件生命周期图父子组件生命周期关系

组件化响应式vdom 和 diff模版编译渲染过程

VuexVuex 基本概念stategettersactionsmutation用于 Vue 组件dispatchcommitmapStatemapGettersmapActionsmapMutationsVuex

自定义 v-model$nextTickslot动态、异步组件keep-alivemixin自定义 v-modelindex.vue<template> <div> <p>{{name}}</p> <CustomVModel v-model="name" @change="change" /> </div></template><script>import Cus.

props 和 $emit组件间通讯 - 自定义事件组件生命周期props 和 $emitindex.vue<template> <div> <Input @add="addHandler"/> <List :list="list" @delete="deleteHandler"/> </div></template><script>import Inpu.

指令、插值插值、表达式指令、动态属性v-html ：会有 XSS 风险，会覆盖子组件<template> <div> <p>文本插值 {{message}}</p> <p>JS 表达式 {{ flag ? 'yes' : 'no' }} （只能是表达式，不能是 js 语句）</p> <p :id="dynamicId">动态属性 id</p>