前端面试小结

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）设置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`  
}  
},

3).过滤不需要打包的文件

noParse

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

4).externals：cbn引入 webpack的externals属性，将公共的或不常改动的第三方包名称，配置在属性中，打包时会自动忽略当中的包。具体实现如下

externals: {  
Vue: 'Vue',  
Axios: 'axios'  
}

5)happyPack 同时加载多种加载器，加速打包时间 6）按需加载，懒加载等等

4.v-model在vue2和vue3的区别

vue2

<div>
    <testModel v-model="modelValue"></testModel>
      相当于
    <input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
  </div>

vue3

<template>
  <h1>vue3中使用v-model {{msg}}</h1>
  <testModel v-model="msg"></testModel>
  <!-- 等同于下面语法 默认传入一个modelValue 然后子组件接收这个modelValue -->
 <testModel :modelValue="msg" @update:modelValue="msg = $event"></testModel>
</template>