1.v-if v-for 优先级？如果处于同一级，存在的问题

v-for的优先级高 （源码中可以看出）

如果同级，会造成性能浪费

原因：v-for的优先级高，先for循环  然后再if判断；浪费性能
解决方案：
1.两者不能出现在同一级。在外层加一层div 用来做if判断，不满足条件的直接就不循环了
2.如果数据源中有isshow的判断  先用计算属性吧for循环的数据源过滤一下

<template>
  <div class="registerDiv">
  	<!-- 外层包一层 v-if -->
    <div v-if="flag">
      <div v-for="(item,index) in endList" :key="index" >
        {{item.name}}----{{item.age}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      flag: true,
      list: [
        {
          name: '小明',
          age: 12,
          isShow:false
        },
        {
          name: '小红',
          age: 13,
          isShow:true
        }
      ]
    }
  },
  // 计算属性 处理for循环的数据源
  computed: {
    endList() {
     return this.list.filter((item)=>{
        return item.isShow
      })
    }
  }
};
</script>

2.为什么vue组件中的data必须是函数，而根组件不需要

• 1. 因为组件可能会有多个实例（多个地方都用这个组件）；如果对象形式定义data，会共用这个data，一个改变影响另外一个。（好比一块雪糕，每个人都舔一口，污染了） 用函数的话，init的时候回执行这个函数，每次都创建一个新的data

• 2.根组件不需要的原因是 项目中只有一个根实例 是个单例

3.vue中的key的作用和工作原理？说说你的理解

确定一个唯一的DOM元素，执行diff算法的时候更加的高效！

4.函数的防抖和节流 （重点）

• 1. 防抖：让一个函数在一定时间内只执行一次（触发时间间隔达到设置时间）
• 例子：（防抖） 用户注册时候，文本框监听，输入一次就判断（浪费） 用户一直输入的时候我不去检测，停了300毫秒用户不输入了，我才触发检测。
• 2.节流：指定的时间间隔只会执行一次任务
• 例子：（节流） 下拉滚动的时候，监听滚动事件（如果每拉动一点点，都去触发的话就会浪费性能） 多设置一个函数，为了节流 功能：设置一个延迟函数，延迟300毫秒之后去判断一次滚动距离
• 总结：防抖和节流就是为量减少服务器压力，节约计算机资源

5.vue项目优化 （重点）

• 1.v-if 和 v-show 的选择使用
  • v-if会销毁和创建来回切换 v-show是控制display 来切换的
  • 频繁切换用v-show 不经常的用v-if 因为如果v-if是false的话，压根不会渲染
• 2.computed 和 watch 区分使用场景
  • computed 有缓存
  • 使用 watch 选项允许我们执行异步操作 ( 访问一个 API )
• 3.v-for 中 加key 避免和 v-if同级使用
• 4. 不会变化的数据 进行冰冻 Object.freeze(users);
• 5.路由懒加载
• 6.keep-alive
• 7.图片懒加载
  • npm install vue-lazyload --save-dev
  • import VueLazyload from 'vue-lazyload'
  • Vue.use(VueLazyload)
• 6.JS 图片 放到自己的cdn服务器上面（图片一定不要用本地的图片去打包）
• 7.组件按需导入
• 8.Webpack 对图片进行压缩
• 9.减少 ES6 转为 ES5 的冗余代码
• 3.1、开启 gzip 压缩 （需要服务器配合）
• 3.2、浏览器缓存
• 3.4、使用 Chrome Performance 查找性能瓶颈

6.同时监听多个数据

• watcher 不能监听多个变量，但我们可以将目标组合在一起作为一个新的 computed，并监视这个新的 "变量"。

computed: {
  multipleValues () {
    return {
      value1: this.value1,
      value2: this.value2,
    }
  }
},
watch: {
  multipleValues (val, oldVal) {
    console.log(val)
  }
}