面试记录

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:cbn引入 webpack的externals属性,将公共的或不常改动的第三方包名称,配置在属性中,打包时会自动忽略当中的包。具体实现如下
externals: {
Vue: 'Vue',
Axios: 'axios'
}
4.happyPack 同时加载多种加载器,加速打包时间
5.按需加载,懒加载

3)v-model 封装组件

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

4reduce 方法

callback (执行数组中每个值的函数,包含四个参数)

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

initialValue (作为第一次调用 callback 的第一个参数。)

5keep-alive
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

posted @ 2022-09-07 09:48  木头小屋  阅读(33)  评论(0编辑  收藏  举报