1.写出Vue高级方法5个并列出含义:
- $set (更新数据,key,value)既可以新增属性,又可以触发视图更新,数据下标更新
- mixins vue混入
- $nextTick 在下次dom更新循环结束之后执行延迟回调
- $emit 子组件向父组件传参的标志内部写事件名+参数
- $on Vue事件监听的方法(‘事件名’,回调函数)一旦触发事件会执行回调函数,会被多次触发
- extend 获取实例的构造函数
- $off 移除事件监听
- use 使用插件(执行插件的install方法)
2.webpack中plugin与loader区别
loader 用于加载某些资源文件,因为webpac本身只能打包js,loader提供了打包别的文件的能力
plugin 用于扩展webpac的功能直接作用于 webpack,在webpack整个生命周期中都有用,额外处理一些事情,压缩,清理,抽出
3.列出你常用的5个plugin
- MiniCssExtractPlugin css抽出压缩插件
- CssMinimizerPlugin css压缩插件
- CopyWebpackPlugin 拷贝插件
- CleanWebpackPlugin 清空插件
- TerserWebpackPlugin js压缩插件
- htmlwebpackplugin 处理html模板
4.列出你常用的5个loader
- css-loader 处理css文件
- less-loader 处理less文件
- style-loader 把css插入到header
- file-loader 当文件比较小的时候转成base-64
- url-loader
- babel-loader(ES6-ES5)
5.不用vue脚手架如何搭建基于webpack的vue项目
vue-loader 加载vue文件
vue-template-compier 转换为template为render
vue-style-loader 处理css
vue-hot-reload-plugin热更新
moudle:{
rules:[{
test:/\.vue$/,
loader:"vue-loader",
options:{
...}
}]
}
6.webpack常见的优化方式有哪些
- css优化压缩
- js优化压缩
- 分清mode产品模式与开发模式
- 预加载 用webpack魔法注释webpack-prefetch:true
- 异步加载 import()
- 组件的按需导入 babel-xx插件
- 摇树功能treeshake(只加载需要的模块内组件)
7.webpack如何优雅切换环境,跨平台传参
1.在packge.json文件中指定配置文件
"script":{
"dev":"webpack --config mypack.config.js"
}
2.安装cross-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
8.写一个跨域代理
devServer:{
proxy:{
"/api":{
"target":"http://www.520mg.com/",
"changeOrigin":"true",
onProxyReq(proxyReq,req,res){
proxyReq.setHeader("Referer", "http://www.520mg.com");
}
}
}
}
9.bind与call和apply的区别
call、apply和bind都是用于改变方法中this指向的。
call调用 将方法中的this指向call中第一个参数,当第一个参数为null、undefined时,默认指向window
apply与call相似,不同之处在于传递给方法的参数形式不一致。apply传递给方法的参数是数组的形式。
call和apply在改变方法的this指向时,会同时执行方法;而bind不会执行方法,而是返回改变this指向后的新方法。
10. jquery 无new化操作的原理
1.工厂函数
function JQuery(select){
rerurn new JQuert.fn.init(select)
}
2.构造函数
JQuery.fn.init=function(select){
return this
}
3.重新指定原型
JQuery.fn.init.prototype = JQuery.fn.