黎小小的博客

版本："vue-quill-editor": "^3.0.6",

页面设置和组件管理切换：使用自定义组件v-model实现。

通过this.$route.matched获取所有匹配路由，将处理首页外的其他路由设置到一个数组中，再通过数组循环方式显示。背景：面包屑根据菜单内容显示不同内容。首页永远存在，后面的活动管理及多级菜单的面包屑展示。监听路由，获取路由栈this.$route.matched。通过路由中的meta属性设置title用于显示面包屑;

背景：根据后端返回数据生成多级菜单，菜单项可能会有很深的层级，如果直接使用elementUI 去编写会写很深的层级，代码繁杂，一旦后面菜单项有改动又不利于维护如何做到多级菜单？使用递归组件。

场景：左侧菜单栏的菜单项有内部组件切换，也会有点击后进入外链的情况，如何同时处理这种情况？AppLink封装：插槽形式显示el-menu-item。

首页的tag一开始就会存在，而且是不能进行删除的当点击左侧栏的时候,如果tag没有该菜单名称则新增，如果已经有了那么当前tag背景为蓝色。删除当前tag，如果是最后一个，那么路由调整到它前面那个标签并且背景变蓝，如果不是最后一个那么路由调整到它后面那个标签并且背景变蓝。还有我们注意这个tag不论路由如何切换都是会存在的，所以这个tag一定要存在我们之前定义的Main.vue中。

路由不在router文件中写死，而是在登录后通过后端获取路由数据，然后进行动态路由设置。为什么要使用动态路由？可以进行权限管理，比如后端根据不同用户和超管会有返回不同的数据，这个数据控制路由、菜单、页面按钮等的显示和隐藏，从而进行权限控制。

【代码】vite项目中mock和axios封装。

如下图，如果使用简单diff算法真实 DOM 节点会，但是实际上通过简单的观察可以发现只需要移动一次p-3就可以。所以得出结论：简单diff算法的性能在某些场景下并不是最好的。对于上述的例子，使用双端diff算法的性能会更高。

在vue中用于比较新旧vnode的子节点都是一组节点时，为了以最小的性能开销完成更新，需要比较两个子节点，用与比较的算法就叫作diff算法。

命令式框架关注过程声明式框架关注结果（底层对命令式的DOM获取和修改进行了封装）

本质就是一个对象(mounted函数中打印一下组件即可看到打印的是一个对象)如何利用javascript对象来描述一个组件？如何修改渲染器的内容？渲染函数时写的只是针对虚拟节点不是针对组件（即传入一个对象）

渲染器的作用就是把虚拟DOM渲染为真实DOM思考下，我们有一个虚拟 DOM，如何将它转换为真实 DOMprops: {},

虚拟节点（dom）本质上就是一个普通的JS对象，用于描述视图的界面结构。

Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

在vue中提供了一种复用性的操作，所混入的对象包含任意组件的选项（data|computed，生命周期|watch，methods）

注意，这个 attribute 可以用于常规 HTML 元素，但这些元素将被视为组件，这意味着所有的 attribute 都会作为 DOM attribute 被绑定。如 a标签 <component is="a" href="XXX.baidu.com"></component>，通过 Vue 的 元素加一个特殊的 is attribute 实现。currentPage可以包括已注册组件的名字，或一个组件的选项对象。

初衷：为了解决模块里面有太多的计算逻辑让模版难以维护。计算属性可以依赖一个数据也可以依赖多个数据的变化使用场景：商品单价和数量改变时，商品总价更改。如果写在方法里面，那么每次修改商品单价和数量时都会去调用这个方法，这种每次去调用都会消耗一部分性能，对页面渲染并不友好。所以就可以使用计算属性，计算属性可以使用缓存。

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。即父子组件只能使用各自作用域的数据。

缺点：操作混乱，一般是父组件操作父组件的数据，子组件操作子组件的数据，这种方式是父组件中编写方法通过this.$refs.child.setMsg("传给子组件")的形式来操作子组件。4. $attrs/$listeners：能够实现跨级双向通信，能够让你简单的获取传入的属性和绑定的监听，并且方便地向下级子组件传递，在构建高级组件时十分好用。1. props/$emit 可以实现父子组件的双向通信，父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信。

vue生命周期表示在组件创建后的一系列变化，其中钩子函数会在生命周期的关键节点中被调用为什么在beforeCreated()时，data和methods方法还没有创建，但是在beforeCreated()里面打印this可以看到data相关的数据？跟浏览器有关，浏览器中，如果是引用数据类型，在后续对其有改变时，前面打印也会时后面更改后的数据。可以通过debugger断点进行查看就没有了。

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。数组中也可以使用对象语法。

v-model在页面中不只是能用于表单控件<input>, <textarea> and <select>中。除此之前还可以使用到自定义组件中。父组件使用了v-model以后，自定义组件里面，也不止限于表单组件。v-model其实只是一个语法糖，和子组件是不是表单组件没有关系。v-model="name" 其实是其实是v-bind:name="name"和v-on:update="name=>newName=name"的语法缩写。