连续的上一篇文章：
原始|高级图表（1）：主面板开发
原始|高级图表（2）：相关信息和缩放支持设计
提示：摘要。
①它将用于学习。能够灵活地使用拳头的组合是社会的象征之一。
②每个技术要点都值得首选学习，当它们合并时，可能会感到惊讶。
③当您想使用它时，您可以想到它。当您想到它时，可以使用它。当您使用它时，您可能会变得优雅。这也是编写“每个技术要点值得出色写作系列”的最初意图。
④以后写有点累。实际上，它可以被视为50多个知识的技术点，并且组合懒惰。
⑤前端确实知识渊博。更新迭代很快。我没有总结一下。我没有找到它。我不想说前端卷很害怕，并查看了下面的图片。
原始的手写高级地图已更早开发。总而言之，这是其中的前端知识技术点，并查看开发这样的高级地图所需的知识和技术点。
只有可以使用的知识和技术才能考虑。高级地图的每个步骤都是原始作者的原始。市场上没有参考库。尽管这并不困难，但它也涉及许多前端知识技术点。它是对思维组织，逻辑设计和技术点的灵活使用。知道应该实现什么技术要点以及何时。
我总结了总共30多个知识技术要点，并且更有可能更有可能。欢迎分享评论。
这些知识技术要点分为以下系列：
1.道具
高级图主要用于接收由父组件传递的主面板数据。例如，当使用Hasscale调用父组件中的面板组件时，布尔值告诉面板组件是否支持缩放。progressdata用于从渲染面板接收数据。应当指出，父组件中的传输名称应与儿童组件中的道具中定义的名称一致。以下是高级图中道具的应用。
道具可以是从父组件接收数据的数组或对象。Props可以是一个简单的数组，也可以使用对象作为替换，并且该对象允许配置配置高级选项，例如类型检测，自定义验证和设置默认值.support Configuration属性类型：数据类型，默认设置默认值，是否必要，验证器自定义验证函数。
2. $发射
$ emit用于分发事件和通过参数，通常与道具一起使用，以实现父子组件通信的目的。在高级地图中，变更事件由父亲的组件发送并传达了三个参数：这是。bodywidth，this.list.note，即在接收事件时，父组件应保持名称一致。
3.参考
REF用于绑定VUE中的组件，您可以通过此获取组件实例对象。例如，当我们要调用组件中的子 - 组件的方法或属性时，您可以以这种方式调用它。
4.观看
手表是VUE中常用的API之一。它用于监视数据。它可以监视数据中的数据，也可以在道具中收听数据。
手表在VUE实例上观察表达式或函数计算结果的更改。回调功能获得的参数为新值和旧值。表达式仅接受简单的关键路径。对于更复杂的表达式，请用函数替换它。
面板数据列表传递的面板数据progressData和高级映射中的面板数据中的母体组件以及道具中的父组件。使用深度属性，表明内部内部是否值得监视。在官方网站上，该数组不需要使用深：true可以收听阵列的内部内部。
5.计算
计算是计算属性。对于任何复杂的逻辑，您应该使用计算属性。这是其应用程序方案。尽管它可以通过方法或观看完成，但是在处理复杂逻辑时，它在组成方面具有优势：计算属性基于它们。回答依赖关系对缓存。
高级地图的实现已被多次使用计算
6.创建
创建会声明周期钩功能。如果您想尽快获取接口数据，在这里非常合适。
在实例创建后立即立即调用。在本步骤中，该实例已完成选项的处理，这意味着已配置了以下内容：数据侦听，计算属性，方法，事件/侦听器的回调函数。但是，安装阶段尚未开始，$ EL物业目前不可用。
高级映射是获取可以在创建中提供的关联数据。
7.安装
安装是VUE生命周期钩功能。目前，DOM被新创建的VM替换。$ el。我们可以在安装中执行DOM操作。这是DOM操作可以更好地执行的最早钩函数。
请注意，安装并不能保证所有子组件也已安装。如果要等到整个视图呈现并执行某些操作，则可以使用VM。$ nexttick
在高级图中，使用了安装的钩子，其中完成了两件事。第一个是监视文档上的点击事件。第二件事是调用init（）函数，初始化到步骤映射
8. Beforedestroy
我们通常在beforedestroy.beforedestroy中进行一些无关紧要和删除操作。在案件被销毁之前发生。在此步骤中，该实例仍然可用。应注意，在服务器的渲染过程中未调用挂钩。
在高级地图中，BeforeDestroy中所做的是删除点击监视。例如，这里也可以在此处删除一些计时器，并进行一些未连接操作。
9.指令V-IF
V-IF指令的应用程序方案可以判断是否显示某个元素，有条件的判断说明。，因此经常比较它们。什么时候应该使用？
V-Show是通过更改CSS显示属性值来实现开关效果。V-如果是真实的条件渲染。当第一个值为真时，它将进行编译和渲染。编织V-IF适合不明显的场景，因为他的切换将被重新编译和渲染，这会大大消耗。带有一个小的头顶。
使用高级映射中的V-IF指令来确定是否支持Zoom，即是否显示Zoom工具栏，如下
10. v-for
它也通常用于遍历循环发电元件的指令中。应注意关键属性。如果您希望元素（组件）保持足够的独立性。
提示1：V -FOR的默认行为将尝试修改元素而不是移动它们。要强迫其重新分类元素，您需要使用特殊属性键来提供分类提示。
提示2：v-if和v-for当它们处于相同节点时，V-For的优先级高于V-IF，这意味着V-IF在每个V-For loop中都会反复运行。您只想渲染某些项目的节点，此优先机制非常有用。如果这可能不会导致不必要的消费。
高级地图使用V-For来生成一系列梯子节点和文本线节点。该系列节点构成了高级地图的主面板，如下
11. v-bind
v绑定是最常用的，但通常我们使用其缩写”：“”。它的用法是动态绑定一个或多个属性或一个组件支柱与表达式。
提示：权力下放：
.prop-作为DOM属性绑定而不是作为属性绑定。
。骆驼 - （2.1.0+）将烤肉串 - case属性名称转换为骆驼。（从2.1.0开始支持）
。同步（2.3.0+）语法糖将扩展到更新父组件绑定值的V-ON侦听器。
在高级地图中，例如键，残疾和样式的动态绑定，如下
12. V-ON
V-ON用于绑定事件。我们使用的更常用的是“@”，并结合某些修饰符的使用，有时非常有用，例如click.Stop可以防止冒泡。
提示一些修饰符：
.STOP -CALL event.StopPropagation（）。
.prevent -call event.preventDefault（）。
.capture-添加事件侦听器时使用捕获模式。
。
。{key代码|Keyalias} - 仅在从特定键触发事件时才能敲击回调。
。
.ONCE-仅触发一次。
。elefft-（2.2.0）仅在单击左鼠标按钮时才触发。
.right-（2.2.0）仅在鼠标右时才触发。
.Middle-（2.2.0）仅在单击鼠标中的键时才触发。
。
从2.4.0开始，V-ON还支持绑定事件/侦听器键值对无参数的对象。注意使用对象语法时，它不支持任何修饰符。
高级地图主要用于绑定事件，并与.STOP合作使用预防事件冒泡，如下所示
13. V-HTML
V-HTML用于绑定HTML字符串，该字符串是更新元素的InnerHTML。
提示1：动态渲染网站上的任何HTML非常危险，因为它易于引起XSS攻击。仅在可信内容上使用V-HTML，并且从未使用用户提交的内容。
提示2：在单个文件组件中，范围内的范围内的样式不会在V-HTML中应用，因为VUE的模板编译器未处理HTML。如果您想设置V-HTML内容范围的CSS，您可以用CSS模块替换它或使用其他全局
原始：https：//juejin.cn/post/7095889556607598629