FrankKai

### 8.Vue响应式更新数组--删除组件列表中特定项不符合预期 情况：`[组件实例0,组件实例1,组件实例2]`希望删除组件实例1 代码: `this.componentArr.splice(1,1);`  结果：看起来像是删除了实例2  原因：Vue不能检测数组的setter，类似这样`vm.items[1]=1`的都不能被检测，更别提数组元素的删除，Vue并不能检测到。（这是个错误观点，实质上会被删除，只不过子组件中数据没有更新，但`vm.items[1]=1`检测不到是真）。 方法： - `this.componentArr.splice(1,1,null)` - `Vue.set(this.component, 1, null)` 结果：  上面的方法正确吗？ 某些情况下是适用的，但是它实际上造成了内存浪费，因为这样会导致数据没有被完全删除，会变成`[组件实例0，null,组件实例2]`。 什么情况下不适用呢？ 当与另外一个数组有映射关系时，也就是说数据与我们当前数组一一对应时，上面的方式就不适用了。例如：[1,2,3]与[实例1，实例2，实例3]，删除后理应是[1,3]与[实例1，实例3]，但是使用`vm.items.splice(1,1,null)`后，会导致结果为[1,2]与[实例1，null，实例3]。 这种情况下必须使用`vm.items.splice(1,1)`。 所以最好的方式是**`this.componentArr.splice(1,1);`+ prop **。 `this.componentArr.splice(1,1);`:可以将第1项的数据删除，但是不会更新子组件中数据。 `prop`:会传递更新后的数据到子组件，子组件在watch函数中重新对赋与v-model绑定的值。 ```js props:...

### 9.vue 插件 #### 写一个插件 - 插件通常添加 全局函数 给Vue - 插件类型包括以下5种 - 自定义一些全局方法或者属性。vue-custom-element - 自定义一个或者多个静态方法：指令/过滤器/过渡等等。 - 通过全局的mixin添加一个组件的选项。vue-router - 通过Vue.prototype添加一个Vue实例方法 - 为自己提供API的库，于此同时注入一些上面的组合。 一个Vue.js插件应该暴露一个install方法。这个方法将在Vue构造器的第一个实参中被调用，就像下面这样： ```js MyPlugin.install = function (Vue, options) { //1....

### 10. vue单元测试 - 最简单的单元测试的例子 - test runner（Jest，mocha-webpack，VUE TEST UTILS） - **测试单文件组件** #### 最简单的单元测试例子 ```js //导入vue测试工具和需要测试的组件 import { mount } from '@vue/test-utils'; import Counter from './counter'; //挂载组件 const wrapper =...

### 11. 为``添加scoped属性有什么效果？ 关键词：无值attr CSS属性选择器 CSS局部作用域 >为当前组件的DOM元素添加无值attr，CSS再通过属性选择器匹配元素，保证了CSS样式的局部作用域。 **若是不加scoped，就会仅仅匹配class名为example的DOM元素，这会错误的匹配到其他组件（父组件，兄弟组件，子组件，自定义组件，第三方组件）,从而导致影响到其他组件的样式和布局。** - ``包裹的CSS仅仅适用于当前组件的标签 - 这种方式类似于Shadow DOM中的样式encapsulation(封装) - 需要一些说明(caveats)，但不需要polyfill - 可以使用PostCSS转换 ``` .example { color: red; } hi ``` 经过PostCSS转换后的形式如下： ``` .example[data-v-f3f3eg9] { color:...

### 12. 什么是style blocks，custom blocks？ - styles blocks就是Scoped CSS，第11个comment有讲。 - custom blocks是什么呢？ - 加载器可以可以根据block的lang属性，block的tag名，以及webpack中的配置规则。 - lang属性被指定时，block将被作为一个文件去与lang属性匹配。 - 匹配到以后，*.vue文件将作为custom块暴露出来的函数的参数。 - 可以使用resourceQuery去匹配一个无lang属性的块。匹配不到会忽略。例如，想匹配块： ``` { module: { rules: [ resourceQuery: /blockType=foo/, loader: 'loader-to-use'...

### 13. Duplicate keys detected: '0'. This may cause an update error. ```html ```

### 14. vue调用生命周期钩子源码 ``` callHook(vm, 'beforeCreate') // 拿不到 props data callHook(vm, 'created'); callHook(vm, 'beforeMount'); callHook(vm, 'mounted'); callHook(vm, 'updated') callHook(vm, 'beforeDestroy'); callHook(vm, 'destroyed'); ``` ```js function callHook (vm, hook) { //...

### 15. vue的$emit源码 ```js Vue.prototype.$emit = function (event) { var vm = this; { var lowerCaseEvent = event.toLowerCase(); if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) { tip( "Event \"" + lowerCaseEvent...

### 16. vue的mixin什么时候适合用？ ``` Vue.mixin( mixin ) ``` 参数：{Object} mixin 用法： 全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。 #### 全局混入 也可以全局注册混入对象。注意使用！ 一旦使用全局混入对象，将会影响到 所有 之后创建的 Vue 实例。使用恰当时，可以为自定义对象注入处理逻辑。 ``` // 为自定义的选项 'myOption' 注入一个处理器。 Vue.mixin({ created: function...

### 17. vue中的mixin与plugin区别是什么？ https://medium.com/@denny.headrick/mixins-and-plugins-in-vuejs-ecee9b37d1bd