面试记录

1.new vue干了什么

vue只能通过new关键字初始化
合并传入的options
初始化生命周期
初始化事件中心
初始化渲染
初始化data
初始化props
初始化computed
初始化watch
最后检测是否有el属性，有的话就把上面渲染好的代码挂载到页面上

2继承的几种方式
1）原型链继承

function Kid(){};
Kid.prototype=new Parent("who");

var k=new Kid();
console.log(k.name); //who
console.log(k.sayHello()); //Hello,who

2）构造继承

function Kid(name){
Parent.call(this,name);
};

var k=new Kid("who");
console.log(k.name); //who
console.log(k.sayHello()); //error

3）实例继承

function Kid(name){
var p=new Parent(name);
return p;
};

var k=new Kid("who");
console.log(k.name); //who
console.log(k.sayHello()); //Hello,who

4）组合继承
function Kid(name){
Parent.call(this,name);
}
Kid.prototype=new Parent();

var k=new Kid("who");
console.log(k.name); //who

console.log(k.sayHello()); //Hello,who

3.webpack 打包优化

1.缓存

1）设置mate标签



2）文件打包输出路径添加时间戳

const timeStamp = new Date().getTime();
module.exports = {
publicPath: process.env.NODE_ENV === "production" ? "/dist/" : "/",
// 打包的时候不使用hash值.因为我们有时间戳来确定项目的唯一性了.
filenameHashing: false,

// 将构建好的文件输出到哪里
outputDir: "dist",

configureWebpack: {
// 重点
// 输出重构 打包编译后的js文件名称,添加时间戳.
output: {
filename: js/[name].${timeStamp}.js,
chunkFilename: js/chunk.[id].${timeStamp}.js
}
},
2.过滤不需要打包的文件

noParse

{
module: {
noParse: /jquery/,
rule: [
...
]
}
}

3.externals webpack的externals属性，将公共的或不常改动的第三方包名称，配置在属性中，打包时会自动忽略当中的包。具体实现如下
externals: {
Vue: 'Vue',
Axios: 'axios'
}

3）v-model 封装组件

v-bind 接受参数。$emit(传父参)

4reduce 方法

callback （执行数组中每个值的函数，包含四个参数）

1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）

initialValue （作为第一次调用 callback 的第一个参数。）