12.30考试捏

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.

猜你喜欢