1、Vue中深度action选择器，scopedCSS规则一：使用scoped后，父组件的样式不会渗透到子组件中。但是，子组件的根节点将同时受到其父组件的作用域CSS和子组件的作用域CSS的影响。这种设计是为了让父组件从布局的角度来调整其子组件的根元素的样式。导致场景一：组件中使用了第三方组件，但需要自定义第三方组件的类样式。比如我们引入ElementUI组件库，我们需要修改所用组件中的class="el-form-item__label"样式进行修改。这个时候我们不能直接修改el-form-item__label的样式。解决方案1：解决方案2：某些预处理器（如Sass）无法正确解析>>>。在这种情况下，您可以改用::v-deep运算符-它是>>>的别名，并且同样有效。场景一的应用：场景一的原理：其实就是在el-form-item__label样式之前添加了[data-v-30be3d08]属性。这个属性和scoped生成的属性是一致的，这样才能达到深度效果。2、vue.extend()创建一个Vue构造函数模型，组合参数是一个包含组件选项的对象，用于创建子类实例。当我们制作模态时，它很有用。通过定制说明，我们可以生产定制的高可重用性组件。Vue.component直接一个一个创建组件实例。3.scopeslot场景的麻烦：我们可以在组件模板中获取一条数据，但是在组件应用到父组件之后，访问数据就会变得困难，除非通过渗透或者传值的方式解决或者vuex，但是作用域插入槽给了我们一个解决方案。四、Element-UI表格中el-table-column标签下的input标签无法输入。问题是以下情况输入框无法输入。原因是：在table形式中，el-table已经绑定了:data值，所以所有的双向绑定都需要是:data上的值。像这样是比较好的解决方法5.对于运行机制和熟练map,filter,reduce方法看下面两个例子正确：错误：总结：arr.splice执行后，arr的长度自动缩短，并且i的取值是根据arr长度程序选择当前长度对应的下标i。在我错误的例子中，j--只会缩短循环次数，并不能实现下标缩短后index和arr的对应。实际上只有i--是正确的，保证arr的长度变短，而i保持一致。但是我对for循环机制的理解并没有错。6、上一点的扩展错误较多，程序死掉。原因是arr.length的长度由于作用域问题而变化。你以为给j赋值时j的长度也会改变，其实不然，j的长度总是等于第一个固定值的长度，i总会遇到第一个undefined--，它会永远不会在i=1的位置跳出：正确：7.Vue2无法检测到普通的newAdd属性，必须做Vue.set()深度响应。Object.defineProperty的局限性：Vue无法检测属性的添加或删除。-遇到了以下两种场景，一种能实现响应式，一种不能。可以实现：我们异步拿到数据后，对数据进行forEach遍历，给这个res加上字段赋值，然后通过this.[目标数据对象]=res，就可以实现响应式。如图：不可以：我们拿到数据res之后，需要和res做更多的异步处理，给它添加字段。直接用上面的方法也是不行的。原因是内部机制。res异步后添加的字段不响应。因为eventLoop机制，在同步代码this.[targetdataobject]=res中已经完成了第一次赋值，后面再进行异步promise如果接收到的数据添加到this.[targetdataobject]，第一个出现Object.defineProperty的限制。我们只能通过Vue.set()深入响应式的方式来解决。如图：8.floatingclear什么是浮动：解决方法：clear:bothinanemptydivbehindthefloatingelement9.gitlog--graph图分析怎么看这样的图，当前最里面的线代表它是开发的主要分支。分析：当wikicommitversion67042...时，这张图看起来很清晰，※点回到develop的主分支，其实是因为这张图是历史git日志提交线图，是一个视觉逻辑的处理过的图像。表示wiki提交版本67042...包含四个提交版本e07433...、4cd034...、2169f2b...、603e34c...，您可以回滚任何提交版本。显示这张图时，wikicommitversion67042...有2个parents，一个是e07433...，一个是2169f2b...。但是如果我们强行回滚到4cd034...，这个日志图就会重新绘制逻辑更改。这时候最里面就是当前的开发，但是它的parent不会是这样的。是经过逻辑再判断。图中最里面的develop主分支上出现了我看到的4cd034...版本parent，这张图的主分支中另一个parent是603e34c...。切换后的分支如下所示。其实根据图就可以追溯，非常方便！！:-我开发的时候就是这种情况，看个简单的例子。git的粗略机制：在使用git的时候，我们只关心分支线。但其实git也有当前版本和版本提交时的“时间线”，并且会在这个版本行上打上开发者标签，方便git算法的对比。所以在合并的时候，不仅会标记“others”，还会对比历史commit，判断是否有冲突。比如我和同事同时维护一个仓库。7月1日我们都维护了同步commit1，但是7月2日，我的同事对a.vue、b.vue、c.vue做了修改。7月2日，我对c.vue做了修改，d.vue已经修改。7月2日下班前，同事比我早提交了他的commit2。这时候我的推送代码就会出现问题。我需要先拉取（fetch+merge）我同事的commit2。获取的代码将与我的代码进行比较。但是由于我没有修改a.vue和b.vue文件，所以git只会对c.vue文件做冲突判断（因为我们都有修改，可能会有冲突）。对于a.vue和b.vue文件，git已经在同事这边做了commit1和commit2的合并（或者commit1和commit2的比较）。merge)这个逻辑判断不需要再比较。10.delete删除删除数组元素的坑delete删除数组元素，删除内容为空，但元素个数不变[1,undefined,undefined]遍历后使用delete:[<1个空项>,undefined,undefined]解决方法是考虑使用filter，直接return会自动删除数组中的undefined。十一、css中的~和css中的>">"是：css3特有的选择器，A>B表示选择A元素的所有子B元素。扩展：.a,.b{逗号指的是同一个css样式}.a.b{空格指的是后代元素}后代元素：包括儿子、孙子、曾孙等元素a>.b{大于号指的是子元素}子元素：“~”在子css中是：p~ul{　　background:#ff0000;}

快乐生活

　　
• 生活
　　
• Life
　　
• Life

定义及用法：p~ul选择符p之后出现的所有ul。两个元素必须具有相同的父元素，但ul不必紧跟在p之后。12、在ElementUI的表格形式中，以header-row-class-name等表格属性为例注意：header-row-class-name是表头行className的回调方法，而可以使用字符串为所有标题行设置固定的类名。（表头行是指表格中的最上面一行）使用：需求是对齐表格中选择列的选择按钮。思路有两种，一种是使用header-row-class-name来改变header行的样式，另一种是穿透content行的样式，使用label选择器只给选中的div设置样式内容行更改。scss13.CSS3:nth-child()选择器同上一个问题：如果我们需要设置内容行的第四个子元素的布局，可以先用row-class-name来引用className内容行的，然后定位到它的td的第四个子标签，做内容布局十四，正则输入判断，在input上使用onkeyup快速限制用户输入过滤非数字onkeyup="value=value.replace(/[^\d]/g,'')"过滤非数字和.onkeyup="value=value.replace(/[^\d.]/g,'')"十五、slot中的templateVue命名槽：是子组件提供给父组件使用的占位符，父组件中的命名槽会匹配子组件内容片段中具有相应槽属性的元素。表示，父组件可以在该占位符中填充任何模板代码，如HTML、组件等，填充的内容将替换子组件的标签.6以后的版本用法如下：在父组件中使用模板语法，使用v-slot绑定槽名。在子组件中仍然使用name作为slot的标识。Vue作用域插槽：有时让插槽内容访问仅在子组件中可用的数据很有用，但因为只有子组件可以访问，例如用户数据，我们提供的内容在父级呈现。为了让用户数据在父组件的槽内容中可用，第一步：在子组件中，我们可以将用户绑定为元素的一个属性，{{user.lastName}}，第二步：元素绑定的属性称为slotprop。现在在父作用域中，我们可以使用带有值的v-slot来定义我们提供的插槽prop的名称。{{slotProps.user.firstName}}，在本例中我们选择将包含所有槽道具的对象命名为slotProps，但你也可以使用任何你喜欢的名字.16、ElementUI中的原理ElementUI中el-table组件分析我们在使用el-table表格的时候，el-table是双向绑定一个数组列表的。level组件使用了el-table-column组件，这是官方的例子。然后在el-table-column组件上，prop会进行双向绑定。绑定的对象是list数组中元素的一个属性字段，但是我们发现这种绑定方式并不灵活。我们可能需要对list数组中的每一个元素进行操作，也就是每一行。其实elment-ui封装的el-table-column组件中就有这一行。结合上面Vuescopeslot的概念：让当前父组件访问只有子组件可用的数据。row是elment-ui封装的el-table-column子组件中的。我们使用scopedslots的方式是允许当前父组件访问el-table-column子组件中的行。这就是我们在编写业务逻辑的组件中使用它的方式：{{slotProps.row.xxxxproperties}}十七、vscode注释@param快速实现vscode内部已经集成，可以在函数上一行输入/**然后输入十八、在Vue源码中深度复制源码，非常优雅的功能deepCopy(obj,cache=[]){//如果是普通数据类型，直接返回，完成复制if(obj===null||typeofobj!=="object"){returnobj}//cache用于存放原始值和对应的副本数据，递归调用deepCopy函数时，如果之前已经复制过这个副本的原始值，则直接返回storage中的副本值，这样就没有了这一次需要回收和复制每个原始值的项目。//还有一个更重要的函数。如果两个具有相同引用地址的对象嵌套在原始值中，使用缓存可以确保复制值中两个对象的引用地址也相同。//如果find找到一个空数组，consthit=find(cache,c=>c.original===obj)if(hit){returnhit.copy}//定义拷贝的数据类型constcopy=Array.isArray(obj)？[]:{}//用来记录拷贝的原值和拷贝值cache.push[{original:obj,copy}]//递归调用深拷贝函数，在拷贝对象中Object的每一个值。keys(obj).forEach(key=>{copy[key]=deepCopy(obj[key],cache)})returncopy}19.原生JavaScript将字符串模板解析为DOM对象的能力？创建一个template模板元素，放入的HTML字符串会自动解析成DocumentFragment，可以直接插入到页面中。函数parseToDOM(htmlstring){consttpl=document.createElement('template');tpl.innerHTML=html字符串；返回tpl.content;}constel=parseToDOM('

233

');document.body.append(el);但是需要注意