1 路由实现原理是什么? 

a.控制地址栏改变 b.根据地址栏的改变来控制组件的切换 hash 通过 hashchange 监听地址栏的改变 history 通过 popState 监听地址栏的改变

2 vue中的响应式是什么?响应式原理?

数据变页面变 vue在组件和实例初始化的时候 会将data里的数据进行 数据劫持(object.definepropty对数据做处理)，一个叫getter 一个叫setter getter在使用数据的时候触发 setter在修改数据的时候触发， 修改数据的时候会触发setter,触发底层的watcher监听，通知dom修改刷新

3 vue中数据变页面一定变嘛？ 

不一定的 数据变页面变是因为初始化的时候数据劫持了data

对象属性的添加

数组长度的改变 以上两种情况新添加的属性都没有getter和setter 数据变了页面也不变 可以通过$set方法处理

vue的更新队列

将同一个事件循环内的所有数据操作进行和并 然后统一更新 并不是数据修改一次就更新一次

Vue.use() 全局注册

自动执行引入模块内部的install方法 install 方法一般做的是全局注册组件

双向数据绑定

v-model 使用场景 1.表单元素上 2.组件上 在组件使用v-model 提供可一个叫 value 自定义属性 提供了一个叫 input 的自定义事件

事件修饰符

将使用事件的方法进行简化

前端效率优化

分析项目项目需要优化的地方

分析引入文件的大小 ：webpack-bundle-analyzer

下载安装 npm install webpack-bundle-analyzer --save-dev

vue.config.js 配置

module.export:{

  ...

  chainwebpack:(config)=>{

    ....

    if (process.env.NODE_ENV === 'production') {

      if (process.env.npm_config_report) {

        config

          .plugin('webpack-bundle-analyzer')

          .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)

          .end();

      }

    } else {

    }

  }

}

在package.json 中配置分析指令

{

  ...

  "script":{

    "report": "npm_config_report=true npm run build"

  }

}

4.通过命令使用

npm run report

lighthouse 检测一个网页运行效率

下载安装

npm install lighthouse -g

使用

lighthouse 要检测的网址 --view