### 写出vue高级方法 5个并列出含义
- $nextTick(callback)
数据更新,触发dom更新执行的回调函数
- $set(更新数据,key,value)
强制更新数据与视图(数组下标更新,更新视图)
- $on 监听事件
- $off 移除监听
- $emit(事件名,事件值)
- mixins 混入
- extends 获取实例的构造函数
- use 使用插件(执行插件的install方法)
![全局方法](https://upload-images.jianshu.io/upload_images/3806201-94467ebb3c11adb5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
### webpack中plugin与loader区别
~loader~ 把非js文件转换为webpack可以处理的模块
~plugin~ webpack执行过程中(生命周期)额外处理一些事项,压缩,清理,抽出
---
### 列出你常用的5个plugin
`html-webpack-plugin` 处理html模板
`min-css-extract-plugin` 抽出css
`clean-webpack-plugin` 清理dist目录
`copy-webpack-plugin` 拷贝文件(静态资源目录)
css压缩优化插件 ,js压缩优化插件
### 列出你常用的5个loader
css-loader,style-loader,less-loader ,babel-loader(ES6-ES5)
vue-loader,url-loader,file-loader( 把图片文件base64格式)
### 不用vue脚手架如何搭建基于webpack的vue项目
> vue-loader 加载.vue文件
> vue-template-compiler 转换template为render函数
> vue-style-loader 处理css
> vue-hot-reload-plugin 热更新
```js
moudule:{
rules:[{
test:/\.vue$/,
loader:"vue-loader",
options:{...}
}]
}
```
### webpack常见的优化方式有哪些
1. 压缩
压缩css,html,js,图片
2. 分清 mode产品模式与开发模式
3. 合理devtool:sourceMap
4. 组件treeShake 摇树(只加载需要的模块内组件)
4. 异步加载 import()
5. UI库组件的按需加载 babel-xxx插件 按需导入组件
6. webpack魔法注释/*webpack-prefetch:true*/ 预加载
7. 通过hash命名 合理缓存
### webpack如何优雅切换环境,跨平台传参
1. 在package.json 指定配置文件
```
"script":{
"dev":"webpack --config mypack.config.js"
}
```
2. 安装corss-env插件 跨平台传参
```
"scripts": {
"build": "cross-env NODE_ENV=production webpack",
"serve": "cross-env NODE_ENV=development webpack serve",
},
```
```
// webpack.config.js
// src源文件目录 都可以获取传入的参数
mode: process.env.NODE_ENV, //产品模式| development
```
### 写一个跨域代理 http://www.520mg.com/api/list.php
```
devServer:{
proxy:{
"/api":{
"target":"http://www.520mg.com/",
"changeOrigin":true,
onProxyReq(proxyReq, req, res) {
proxyReq.setHeader('Referer', 'https://m.mi.com/');
}
}
}
}
```
### bind与call和apply的区别
bind 返回新的函数
apply和call都是执行一个函数
共同点:都是改变this执行
apply是数组形式传参
### jquery 无new化操作的原理
1. 工厂函数
```
function JQuery(select){
return new JQuery.fn.init(select)
}
```
2. 构造函数
```
JQuery.fn.init=function (select){
....
return this;
}
```
3. 重新指定<span style="color;red">原型</span>
```
JQuery.fn.init.prototype = JQuery.fn.
```
相关文章
- 12-22Get小技巧等分列表
- 12-22C++ 多线程编程实例【2个线程模拟卖火车票的小程序】
- 12-22Python 元组tuple相关知识
- 12-22这座城市又多了一个孤独的小咸鱼
- 12-22问题 E: 小y的tower
- 12-22【邢不行|量化小讲堂系列35-python量化入门】建议收藏 | Windows下安装TA-Lib终极教程
- 12-22这世界真小
- 12-22这世界真小
- 12-22Python基础知识6-元组
- 12-22放一道比较基础的LCA 的题目把 :CODEVS 2370 小机房的树