vue_面试题整理

// vue 面试题总结
// 1. v-if与v-show的区别

// 功能，条件渲染，显示或隐藏
v-if: vue实例不会渲染dom节点，只有当表达式为真(假)的时候才是渲染(销毁)DOM
v-show: 不管表达式是否为真，vue实例始终都会渲染DOM，以css样式display属性来控制显示或隐藏

// 使用场景
当频繁的切换组件时，如下拉菜单，级联菜单，等...使用v-show性能更优


// 2. v-for的key值使用

// 功能，列表渲染，Vue优化diff策略
Vue在diff时，都是在对比虚拟DOM节点，在每次渲染时，都会判断新节点和旧节点是否为同一个节点，
如果不同，会删除旧节点，插入新节点操作，如果相同，Vue认为没有变化，会复用节点

如果不设置key，新节点和就节点只会进行头尾两端相互比较(也就是数据长度是否发生变化)
设置key以后，除了头尾比较，还会从用可以生成的对象中查找匹配的节点，更高效的利用DOM

// 详细查看: https://segmentfault.com/a/1190000008782928

// 总结：
Vue在进行DOM渲染列表的时候，处于性能考虑，会复用已存在的元素，而不是从新创建,如果数据项的顺序被改变，Vue将不会匹配数据项的顺序，设置key值，将会绑定节点唯一，提升性能

// 注意：渲染列表若用数组索引index为key，当向数组中指定位置插入一个新元素后，对应着后面的虚拟DOM的key值全部更新了，这个时候还是会做不必要的更新，就像没有加KEY一样


// 3. computed计算属性和methods方法的区别

// 功能： 处理复杂逻辑

  1. 调用方式
    - computed计算属性不是方法，在模板使用的时候不用加()，否则报错not a function，具有getter和setter
    - methods方法，调用时加上()，使用return返回逻辑处理结果
  2. 响应式依赖进行缓存
    - computed计算属性基于它们的响应式依赖进行缓存
      * 响应式：计算属性内依赖data中其他属性，将会都进行缓存，当依赖的属性改变，计算属性也会改变
      * 缓存机制：{{msg}} -- {{msg}}, msg没有改变，多次访问msg，计算属性会立即返回之前的计算结果
    - methods方法，没有响应式依赖缓存，{{msg()}}-- {{msg()}} 调用一次执行一次
  3. 使用场景
    - computed，一般用于模板渲染，条件渲染计算，
    - methods， 一般用于事件处理方法，click, change......
  
  // 注意点　
  computed: {
    str () {
      let number = this.count  // this.count发生改变，str计算属性就会触发
      return this.name + 'jack'
    }
  }
 
// 4. filter传递多个参数
// 使用{{money | priceFilter(aa,bb)}}
filter: {
　　priceFilter(money, aa, bb){
　　　　第一个参数是过滤传过来的参数，aa，bb是手动传递过来的参数
　　}
}
 

 

// 3. computed计算属性和methods方法的区别

// 功能： 处理复杂逻辑