前端框架

Vue

1. v-show和v-if的区别和使用场景

v-show和v-if都可以控制元素的显示与隐藏，v-show通过控制display：none，v-if通过删除节点。频繁操作元素显示隐藏使用v-show

2. watch和computed的区别

watch可以监听组件内的属性值，如果发生改变即触发的一个函数，这个值应该存在组件中。computed是计算属性，是根据组件中的其他值发生改变，会重新计算，返回一个新值

3. 常用的修饰符有哪些

 .once  .capture  .stop  .prevent  .ctrl  .alt  .self

4. vue中的key的作用

key保证了元素在dom中的唯一性，为将来dom更新提供diff算法依据

5. 详细说一下vue的生命周期

实例期: beforeCreate, created, beforeMount, mounted

运行期：beforeUpdate, updated

销毁期：beforeDestroy, destroyed

实例期的生命周期只会运行一次，created往后可以获取data和methods的方法，可以做接口请求数据初始化

运行期生命周期，组件内数据发生变化且在页面中使用会触发0次或多次

销毁期指组件从dom树中移除触发

6. vue双向数据绑定原理

通过对表单的数据绑定和监听表单的onchange事件实现双向数据绑定

Vue2中使用的是数据劫持的方式对数据进行绑定

利用Object.defineProperty,利用getter和setter对数据进行监听和设置

7. vue组件的作用是什么，如何定义和使用自定义组件

作用：按照视图或功能将页面拆分成若干个组件，最终由组件组成一个完整的页面，耦合度低，利于维护，可以复用

脚手架中,.vue文件就是一个组件

• 引入组件import … from …
• components: {…}
• 以标签形式放在template中

 Vue.extend()

 Vue.component({template: "<div></div>"})

 Vue.component({template: "#app"})

 <template id="app"></template>

8. 组件中的data为什么必须是函数

组件中data为函数可以保证每个组件的data是唯一的，独立的，不会相互影响

9. 父子组件如何传值

父：<son :msg="msg"></son>
子：props: ['msg']

子：this.$emit('fun', 参数)
父：<son @fun="fun"></son>

10. vue-router是什么？它有哪些组件

Vue Router是vuejs的官方的路由管理器

<router-view>

<router-link>

11. vue-router有哪几种导航钩子，有哪些参数

to, from, next

全局：beforeEach()

     beforeResolve()
     
     afterEach()

路由：beforeEnter()

组件: beforeRouteEnter()

​	 beforeRouteLeave()

​	 beforeRouteUpdate()

12. 怎么定义vue-router中的动态路由？如何获取参数

+ 路由表  path: "/home/:id"
+ 跳转  this.$router.push('/home/1')
+ 获取  this.$route.params.id

13. vue的路由实现，hash和history

hash就是通过浏览器地址栏内#后添加东西不会发生新的http请求

history里用h5提供的新api， pushState() ， replaceState()

14. $route和$router区别

$route用来获取当前路由信息，比如path,fullpath,params,query

$router提供路由跳转的一些方法，push,replace,go,back

15. vue-cli中如何使用组件，有遇到过哪些问题吗

脚手架中,.vue文件就是一个组件

+ 引入组件import   ... from ....
+ components: {...}
+ 以标签形式放在template中  

16. 请说出vue-cli中src目录每个文件和文件夹的用法

+ main.js 为项目的入口文件，配置全局
+ App.vue为项目默认展示的组件
+ assets存放静态资源
+ components存放非路由组件
+ pages存放路由组件

17. axios是什么，怎么使用

axios是一个基于promise的http库，用于接口的请求拦截等

axios.get("地址?id=1").then(res =>{})

axios.post("地址", {id:1}).then(res => {})

18. 如何解决跨域问题

+ jsonp

+ 设置代理

  + config/index.js   proxyTable: {}
    proxyTable: {
    	"/api": {
    		"target":""
    	}
    }
    
+ cors

+ 服务端设置请求头

19. 描述使用axios实现登录功能的流程

+ 取出用户名和密码输入框的值
+ 使用axios调用登录接口，并将用户名和密码发送给后端
+ 拿到返回数据，如果登录成功，跳转到首页

20. vuex是什么，怎么使用，哪种功能场景使用

vuex是专门为vuejs提供的状态管理模式

state：vuex的基本数据，用来存储变量

getters：从基本数据(state)派生的数据，相当于state的计算属性

mutations：提交更新数据的方法，必须是同步的(如果需要异步使用actions)。每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数，提交载荷作为第二个参数。

actions：和mutations的功能大致相同，不同之处在于：actions提交的mutations，而不是直接变更状态。actions可以包含任意异步操作。

module：模块化vuex，可以让每一个模块拥有自己的state、mutations、actions、getters，使结构清晰，方便管理。

21. vuex的store有几个属性值

state,mutations,actions,getters,modules

22. 如何让css只在当前组件起作用

<style scoped></style>

23. vue过滤器的作用，如何定义和使用过滤器

过滤器就是对一个字符串的再加工

filters: {
	format(a) {
		return a + "1" 
	}
}
<p>{{msg | format}}</p>

24.vue中常见的基础指令有哪些

v-if v-show v-else v-else-if v-html v-model v-for v-text

React

1. React,vue,angular的区别

   React:

   优点： 速度块，兼容性好，模块化变成

   缺点：React本身只是一个V，如果开发大型项目，需要配合flux或redux

   Vue:

   优点：简单快速强大，模块化

   缺点：不兼容IE8，影响度不大

   Angular：

   优点：功能很强大，比较完善的前端框架，开发团队强大

   缺点：入门容易，深入学习困难，脏值检查浪费性能

2. react diff原理

比较dom树中不同的dom节点，按需更新

3. 组件的状态和props之间有什么不同

state是自身的状态数据，而props是通过属性传递过来的

4. 类组件和函数组件有何不同

类组件又叫有状态组件，函数组件又叫无状态组件，类组件可以声明自己的state，函数组件不可以

5. 为什么建议setState传callback，而不只是个对象

callback是保证了state更新完成之后的回调函数，解决了setState本身是异步的问题

6. 在构造函数中，super(props)的目的是什么

在class类内，调用super实际上是调用父类的构造函数，从而继承属性，只有在super后，才能有this

7. react中生命周期函数

挂载期：constructor，UNSAFE_componentWillMount，render, componentDidMount

更新期 : componentWillUpdate  componentDidUpdate

销毁期 : componentWillUnmount

8. shouldComponentUpdate是做什么的

shuoldComponentUpdate(nextProps, nextState) {}

这个生命周期调与不调对功能没有影响，只是用来做优化处理，如果return true，则执行render，false则不执行render

9. 为什么虚拟dom会提高性能（必考）

虚拟dom就是用js对象来模拟真实dom，操作js对象然后渲染到dom树中，通过对新旧两颗dom树的比较，记录两颗树的差异，实现按需更新

10. react中构建组件 的方式有哪几种，举例说明

function Com1() {
	return ()
}
class Com2 extends React.Component {
	render() {
		return ()
	}
}

11. 在react组件中何处发起ajax请求

初始化数据放到componentDidMount生命周期中发起ajax请求

12. 在react中，refs的作用

获取dom，不推荐直接操作dom，document.get...

this.refs....

13. 使用箭头函数的优点

react组件中的重写类方法this都指向当前组件实例对象，而后添加的方法this为undefined，所以需要更改this指向

箭头函数的优点this指向函数声明的地方

onClick={() => this.fun()},由于render里的this指向组件实例，在render内的箭头函数this也指向组件实例

14. 为什么使用react中的路由

在大型项目中，如果仅仅通过切换组件来做到视图的变化，非常的不方便，而路由是通过地址栏的改变实现展示不同的组件

15. react-router的优点

路由的改变不算做http请求，在不刷新页面的情况下，展示不同的视图，加载速度快

16. react-router与常规路由有哪些不同

常规路由是http请求，会刷新页面，而react-router实现了单页面应用，在不刷新页面的情况下，展示不同的视图，加载速度快

17. flux是什么

flux是facebook用于建立客户端web的前端应用架构，是一个种架构模式，而不是框架，由于react在一定层面上只实现了v这个层面，flux将M,V,C分离开，便于大型项目的维护

Angular

1. ts与js的关系，你觉得ts有什么优缺点

   ts是js的一种超集，包含了js的所有元素，并扩展了js的语法

   优点：

   + 大型项目开发便于维护
   + ts非常的包容，就算编译出错，运行不会出错
   + 活跃的社区，良好的支持3大前端框架

   缺点：

   + 有一定的学习成本
   + 短期开发会增加开发成本
   + 集成到构建需要一些工作量

2. 说明angular中http的用法

   + 在app.module.ts中

     import {HttpClientModule} from '@angular/common/http'
     
     
     imports: [HttpClientModule]


   + 在使用的组件内
   
     import {HttpClient} from '@angular/common/http'
     
     constructor(
     	public http: HttpClient
     ) {}
     
     this.http.get().subscribe((res) => {})

3. 列出三种不同组件之间通信方式

   父：<son [msg]="msg"></son>
   子：import {Input}  from '@angular/core'
   @Input() msg: string
   
   
   
   子：import {Output, EventEmitter} from '@angular/core'
   @Output() outer = new EventEmitter()
   this.outer.emit("123")
   父：<son (outer)="getData($event)"></son>
   
   
   父：<son #son></son>
   import {ViewChild} from '@angular/core'
   @ViewChild('son', {static: true}) son: any
   this.son.msg
   this.son.fun()
   子：

4. angular.X和angular1对比的优势

1.x 只专注于web端的开发

2.~  ionic

1.x语法复杂，学习曲线比较陡

2.x语法较简单，学习曲线比较缓