前端面试题汇总
JavaScript
性能
linux
前端资料汇总
·尽可能多的重用代码
·自定义组件不容易（html css js）
·多次使用组件容易导致冲突
web components通过创建封装好功能的定制元素解决以上问题
但是还未被浏览器广泛接受
Vue实现了上述部分规范
2.组件注册
语法：
Vue.component('组件名称',{
data:组件数据,
template:组件模板内容
})
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<script>
Vue.component('button-counter',{
data:function(){
return{
count:0
}
},
template:'<button @click="autoIncrement">点击了{{count}}次</button>',
methods:{
autoIncrement:function(){
this.count++;
}
}
})
var vm = new Vue({
el: '#app',
data: {}
});
</script>
</body>
</html>
组件注册注意事项：
1.data必须是一个函数。实例vue实例时data却是一个对象。
2.组件模板内容必须是单个的根元素
3.组件模板内容可以是模板字符串，模板字符串需要浏览器提供支持（ES6语法）
template的值用反引号括起来
组件的命名方式：
短横线方式
button-counter
驼峰式方式
HelloWord
如果使用驼峰式命名组件时，那么在使用组件时，只能在字符串模板中使用驼峰的方式使用组件，但是在普通的标签模板中，必须转换为短横线的方式进行组件使用。
字符串模板中使用：
template:'<div><button @click="autoIncrement">点击了{{count}}次</button><HelloWord></HelloWord</div>'
普通的标签模板中使用时：
<div>
<hello-word></hello-word>
</div>
转换规则为大写变小写，拼接时用短横线-
局部组件注册：
var HelloOpener={
data:function(){
return{
msg:'HelloOpener'
}
},
template:'<div>{{msg}}</div>'
};
var HelloCustomer={
data:function(){
return{
msg:'HelloCustomer'
}
},
template:'<div>{{msg}}</div>'
};
var vm = new Vue({
el: '#app',
data: {},
components:{
'hello-opener':HelloOpener,
'hello-customer':HelloCustomer
}
});
局部组件只能在注册它的父组件当中使用，在别的地方是不能使用的。
局部组件可包含全局组件。
3.Vue调试工具安装
1.克隆仓库
打开命令行窗口，cd至你想要存放的目录。然后执行
git clone https://github.com/vuejs/vue-devtools.git
2.安装依赖包
npm install yarn -g
cd vue-devtools 进入克隆下来的仓库
yarn install 安装依赖包
3.构建
yarn run build
4.打开扩展页面加载构建包
然后按照网上各种教程更改错误
结论安装失败或者扩展成功了但是不能正常使用。
所以：查看[这位大佬的博客]( )，下载了一个现成的扩展程序来扩展就好了
如果该文章中的下载链接已经失效的话，可以留言。
扩展程序成功加载时，在运行Vue项目时，打开控制台会出现如下图所示的页面。
可以通过vue的开发工具查看我们的标签结构和动态修改样式等。
4.组件之间的数据交互
父组件传递给子组件
子组件传递给父组件
兄弟组件互相传值
父组件向子组件传值
组件内部通过props接收传递过来的值
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。
// 简单语法
Vue.component('props-demo-simple', {
props: ['size', 'myMessage']
})
// 对象语法，提供验证
Vue.component('props-demo-advanced', {
props: {
// 检测类型
height: Number,
// 检测类型 + 其他验证
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})
使用：
<div size="100" age="18">
<props-demo-simple size="size"></props-demo-simple>
<props-demo-advanced :age="age"></props-demo-advanced>
</div>
动态绑定的数据需要在父组件中声明。
props属性命名规则
·在props中使用驼峰形式，模板中需要使用短横线的形式
·字符串形式的模板中没有这个限制
Vue.component('props-demo-simple', {
props: ['size', 'myMessage']，
template：'<div>{{myMessage}}</div>'
})
//字符串模板中可以使用驼峰式命名形式
template：'<props-demo-simple myMessage="template hello word" ></props-demo-simple>'
<!-- 在html中以短横线拼接形式使用 -->
<props-demo-simple my-message="hello word"></props-demo-simple>
props属性值类型
string 字符串
number 数值类型 使用时需要v-bind传递才能得到正确的类型，否则为string
boolean 布尔类型 使用时需要v-bind传递才能得到正确的类型，否则为string
arr 数组类型
object 对象类型
props传递数据为单项数据流，不允许子组件反向传递。
子组件向父组件传递信息
子组件通过自定义事件向父组件传递信息
Vue.component('props-demo-simple', {
props: ['size', 'myMessage']，
data:{
fontSize:10
},
template：'<div>{{myMessage}}
<button @click="$emit(enlarge-text)"></button>
</div>'
})
<props-demo-simple @enlarge-text="fontSize+=10"></props-demo-simple>
子组件通过$emit提交一个自定义事件，父组件监听这个自定义事件。
传参：
<button @click="$emit('enlarge-text',10)"></button>
<props-demo-simple @enlarge-text="fontSize+=$event"></props-demo-simple>
父组件使用$event接收子组件传递的值，$event和$emit是固定的写法。
兄弟组件之间的数据交互
单独的事件中心管理组件间的通信
组件A=事件中心=组件B
var eventHbu=new Vue()
监听事件与销毁事件
eventHub.$on('add-todo',addTodo)
eventHub.$off('add-todo')
触发事件
eventHub.$emit('add-todo',id)
例子
var eventHbu=new Vue()
Vue.component('comp-a', {
data:{
fontSize:10
},
template:'<button @click="">{{fontSize}}</button>'，
methods:{
handle:function(){
eventHub.$emit('b-event','str of a')
}
},
mounted:{
eventHub.$on('a-event'),(val)=>{
this.fontSize+=val;
}
}
})
Vue.component('comp-b', {
data:{
fontSize:10
},
template:'<button @click="handle">{{fontSize}}</button>',
methods:{
handle:function(){
eventHub.$emit('a-event','str of b')
}
},
mounted:{
eventHub.$on('b-event'),(val)=>{
this.fontSize+=val;
}
}
})
<comp-b></comp-b>
<comp-a></comp-a>
组件插槽
父组件向子组件传递内容（模板内容）
slot为vue专用api
### React
* 介绍一下react
* React单项数据流
* react生命周期函数和react组件的生命周期
* react和Vue的原理，区别，亮点，作用
* reactJs的组件交流
* 有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢
* 项目里用到了react，为什么要选择react，react有哪些好处
* 怎么获取真正的dom
* 选择react的原因
* react的生命周期函数
* setState之后的流程
* react高阶组件知道吗？
* React的jsx，函数式编程
* react的组件是通过什么去判断是否刷新的
* 如何配置React-Router
* 路由的动态加载模块
* Redux中间件是什么东西，接受几个参数
* redux请求中间件如何处理并发
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)**
