前端工程师4.0
1.JS数据类型
一类是基本数据类型，也叫简单数据类型，包含7种类型，
分别是：
Number 、String、Boolean、BigInt、Symbol、Null、Undefined。
另一类是引用数据类型也叫复杂数据类型，
通常用Object代表，普通对象，数组，正则，日期，Math数学函数都属于Object
2.声明变量几种方式，区别
有块级作用域：let const
存在变量提升 var
添加全局属性 var
重复声明变量 var
存在暂时性死区 let const
必须设置初始值 const
改变指针指向 var let
3.事件循环Event loop？
事件循环机制从整体上:
JavaScript 代码的执行顺序Event Loop即事件循环，
是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，
也就是我们经常使用异步的原理。
先同步后异步
异步 包含 宏任务 微任务
异步 遇到 微任务 先执行微任务 执行完后 如果没有微任务 就执行下一个宏任务
宏任务：
setTimeout
setInterval
setImmediate
I/O
UI
Rendering
微任务：
process.nextTick()
Promise
4.Dom事件流，优先级，对一个事件就行回调在哪个阶段。
第一阶段：捕获阶段。
第二阶段：目标阶段
第三阶段：冒泡阶段。//从目标元素上传到window对象
event.preventDefault() //阻止默认事件
event.stopPropagation() //阻止冒泡行为，应用在触发子元素事件但是不想触发父元素事件的情况
event.stopImmediatePropagation() //用在事件响应优先级的场景。举例场景：一个按钮，绑定了两个click事件A和B，通过优先级的方式，第一个响应A，第二个响应B，想A响应了之后不再响应B
event.stopImmediatePropagation()//加在A的响应函数中，就能成功阻止了B的执行，这个可以应用在事件响应优先级
event.currentTarget //指的是当前被绑定的事件，也就是事件代理中父级元素被绑定的事件。
event.target //事件代理中，表示当前被执行的是哪个子元素
5.宏任务和微任务
看上面
6.promise和setTimeout
(function test() {
setTimeout(function() {
console.log(4)
}, 0);
new Promise(function executor(resolve) {
console.log(1);
for( var i=0 ; i<10000 ; i++ ) {
i == 9999 && resolve();
}
console.log(2);
}).then(function() {
console.log(5);
});
console.log(3);
})()
//1 2 3 5 4
then()和setTimeout执行顺序，
即setTimeout(fn, 0)在下一轮“事件循环”开始时执行，
Promise.then()在本轮“事件循环”结束时执行。
因此then 函数先输出，setTimeout后输出。
7.promise的方法
Promise 类有 .then() .catch() 和 .finally() 三个方法，
这三个方法的参数都是一个函数
，.then() 可以将参数中的函数添加到当前 Promise 的正常执行序列，
.catch() 则是设定 Promise 的异常处理序列，
.finally() 是在 Promise 执行的最后一定会执行的序列。 .
then() 传入的函数会按顺序依次执行，
有任何异常都会直接跳到 catch 序列：
实例
new Promise(function (resolve, reject) {
console.log(1111);
resolve(2222);
}).then(function (value) {
console.log(value);
return 3333;
}).then(function (value) {
console.log(value);
throw "An error";
}).catch(function (err) {
console.log(err);
});
执行结果：
1111
2222
3333
An error
8.普通函数和箭头函数区别
箭头函数跟普通函数的区别
1.写法不同
箭头函数：
let fun = () => {
console.log('lalal');
}
普通函数：
function fun() {
console.log('lalla');
}
2.箭头函数不能用于构造函数
普通函数可以用于构造函数，以此创建对象实例。
3.箭头函数中this的指向不同
箭头函数自身没有this，它的this是父级普通函数的this.
在普通函数中，this总是指向调用它的对象或者
如果用作构造函数，它指向创建的对象实例。
4.箭头函数不具有arguments对象
每一个普通函数调用后都具有一个arguments对象，用来存储实际传递的参数。
但是箭头函数并没有此对象。
5.箭头函数不能当做Generator函数，不能使用yield关键字。
6.箭头函数不具有prototype原型对象。
7.箭头函数不具有super
9.set和map
人麻了
10.map和Object的区别
上同
11.JS原型链为了解决什么问题，有什么用
嘿嘿嘿
12.父子组件间通信
组件传值/通信
父子组件
父---子
vm---myA
vm---myB
1.在子组件标签行写入传入得值
2.在子组件内使用props接受父组件传递得值
子---父
myA/myB ---vm
1.在子组件内部使用$emit发射自定义事件和传递给父组件得值
2.在父组件内声明自定义事件接受参数
myA----myB 兄弟组件
兄弟组件 事件总线 vuex v2.x
1.声明一个事件总线Bus.js
export default new Vue();
2.引入事件总线
import Bus from 'xx.js'
//vue.prototype.$emit()
使用总线$emit发射数据出去
Bus.$emit(自定义事件名称,发射的数据)
3.引入事件总线
Bus.$on(自定义事件名称,(形参--->发射得数据)=>{
})
祖先/子孙组件传值
1.由祖先组件使用provide方法传递数据
privode(){
return {"msg":this.msg}
}
2.由子孙组件使用inject注入数据
inject:["msg"]
vm
myA child
vuex
组件传值类型校验
props:{
age:Number,
stu:{
type:Array,
default(){
return [1,2,3]
}
},
msg:String,
对一个类型校验
对多个类型 msg/string/number/isBoolean
}
13.使用过Vue的命令
1.查看版本
$ npm -v
2.3.0
2.#升级 npm
cnpm install npm -g
3.升级或安装 cnpm
npm install cnpm -g
4.用 Vue.js 构建大型应用时推荐使用 cnpm 安装：
最新稳定版
$ cnpm install vue
5.全局安装 vue-cli
$ cnpm install --global vue-cli
6.创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
这里需要进行一些配置，默认回车即可
7.进入项目，安装并运行：
$ cd my-project
$ cnpm install
$ cnpm run dev
8.Vue 项目打包
打包 Vue 项目使用以下命令：
npm run build
14.v-if和v-show的区别
点击我
15.v-for和v-if优先级，会造成什么影响
vue2 : v-for 优先级比 v-if 优先级高
vue3 : v-if 优先级比 v-for优先级高
v-for v-if不一起使用 因为v-if会不断地渲染和销毁dom
16.双向数据绑定的原理，如果不用v-model怎么实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="ip">
<span id="sb"></span>
<script>
// 数据劫持
var obj = {};
Object.defineProperty(obj,'hello',{
set: function(newValue){
document.getElementById('ip').value = newValue
document.getElementById('sb').innerHTML = newValue
}
});
document.addEventListener('keyup',function(e){
obj.hello = e.target.value // 监听事件 修改hello的值,触发set函数 执行set函数内的内容
})
</script>
</body>
</html>
1.Object.defineProperty()方法有三个参数,
分别为监测对象,对象的方法或值,触发函数;
2.如上代码,当对象的方法或属性被读取时,
会自动触发Object.defineProperty()方法的get函数,g
et函数中定义的内容会被执行,
当对象的方法或值被修改或赋值时,
会自动调用Object.defineProperty()方法的set方法,
set中定义的方法也会被执行
3.通过事件监听监听键盘抬起事件,
获取到文本框输入的值,再给对象的属性做赋值操作,
触发Object.defineProperty()的set函数,
从而实现input框与span标签的双向数据绑定
17.watch和computed的区别
computed 希望某一个变量经过计算/处理后输出
特点:具有缓存性 如果某一个值没有发生改变 计算属性不会重新执行/响应
计算某一个属性,只要其中一个变量发生变化,计算属性就可以监听到处理之后并返回
不会执行异步操作
不会存在vue变量中 新建一个属性并返回
methods
特点:无缓存性 只要调用就重新执行
可以封装函数和发送异步请求
watch（侦听器/监听器）
监听属性变量得变化
特点:无缓存性,只有值发生变化得时候才可以监听到
执行开销较大异步操作
'$route.query':{
handler(){
this.name=this.$route.query.name;
this.loadArtilce()
},
deep:true
}
1.浅监听 ---基本数据类型
a(n,o){
.....
}
a:{
handler(){
}
}
2.深监听 ---监听引用数据类型
obj:{
handler(){
},
deep:true
}
18.data为什么是一个函数，不是一个对象呢
1.根组件得data可以是一个对象 普通组件必须是一个函数
2.因为组件是一个可复用得实例 如果是一个对象组件全部指向
同一个引用地址 其中一个发生改变 其他组件也会受到影响
所以说组件得data是一个函数 每次返回一个新对象
19.说一说生命周期，访问data最早在哪个生命周期，获取dom节点在哪个生命周期
20.说一说Vuex是什么，每个属性是干嘛的，如何使用 ？
21.vueRouter 路由守卫，项目中有涉及权限管理吗
22.有对axios进行封装吗
有
23.在开发中有遇到跨域问题吗，怎么解决的
///
24.项目难点和亮点
25.学习过程中vue怎么学习的
26.用过git吗，git基本操作命令
经常用
27.平常怎么解决报错的
嗯
28.常见的接口状态码
嘿嘿嘿
29如何优化你得vue项目?提升项目性能?
1.较少控制台得打印
2.减少异步请求
3.较少dom操作 上层核心减少dom操作
4.尽可能不去一起v-if v-for
5.项目图片使用雪碧图/精灵图
6.正确是用vue指令
7.使用loading加载动画
8.动态组件使用keep-alive缓存
9.区分v-if和v-show使用场景
10.不滥用定时器 尽可能使用别得方式处理
11.不滥用得全局变量/全局资源.....
12.使用得第三方框架/工具库 如果方法使用得少 我们自己封装
lodash underscore js简化工具库
防抖和节流
13.组件库组件按需引入......
14.谨慎使用全局混入