前端必备-vue最新面试总结

1.Vue.js介绍
Vue.js是一个构建数据驱动的 web 界面的渐进式框架。
Vue.js 的目标是通过尽可能简单的 API实现响应的数据绑定和组合的视图组件。
核心是一个响应的数据绑定系统

2.什么是 mvvm
Model 层代表数据模型,可以在 Model 中定义数据修改和操作的业务逻辑
View 代表 UI 组件,负责将数据模型转化成 UI 展现出来
ViewModel 是一个同步 View 和 Model 的对象

3、Vue的响应式原理
Vue实例创建时,会遍历data选项的属性,
用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖,
在属性被访问和修改时通知变化。
每个组件实例都有相应的 watcher 实例,
它会在组件渲染的过程中把属性记录为依赖,
之后当依赖项的 setter 被调用时,会通知 watcher 重新计算更新组件。

4、js浅拷贝与深拷贝的区别
假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,
如果B没变,那就是深拷贝。
深拷贝:
let obj1 = {
a: 1,
b: 2
}
let obj2 = {
a: obj1.a,
b: obj1.b
}
obj2.a = 3;
alert(obj1.a); // 1
alert(obj2.a); // 3

5、vue中key的作用和工作原理
key值主要使用在虚拟DOM
Vue 会尽可能高效地渲染元素,一般会复用已有元素而不是从头开始渲染

6、vue 统一设置404页面
router.js配置路由的地方加入
{
path: “*”,
redirect: “/404”
}

7、Webpack 是一个JavaScript应用程序的打包模块化工具
用于解析CSS的loader一般有:style-loader、css-loader、postcss-loader、less-loader和sass-loader。
@babel/preset-env:用于转换最新的JavaScript代码、为低版本浏览器提供polyfill
@babel/preset-react:用于解析jsx内容,该预设包含了@babel/plugin-syntax-jsx、@babel/plugin-transform-react-jsx
插件:
html-webpack-plugin
生成一个 HTML5 文件,包括使用 script 标签的 body 中的所有 webpack 包。
clean-webpack-plugin可以清理文件,可以用于打包时清理之前打包的文
mini-css-extract-plugin 将CSS提取到单独的文件中,为每个包含CSS的JS文件创建一个CSS文件,同时该插件支持CSS和SourceMap的按需加载。
使用该插件时,style-loader需要替换为该插件提供的loader

8、HTTP与HTTPS的区别

HTTP特点:
1、无状态:协议对客户端没有状态存储,对事物处理没有“记忆”能力,比如访问一个网站需要反复进行登录操作
2、无连接:HTTP/1.1之前,由于无状态特点,每次请求需要通过TCP三次握手四次挥手,和服务器重新建立连接。比如某个客户机在短时间多次请求同一个资源,服务器并不能区别是否已经响应过用户的请求,所以每次需要重新响应请求,需要耗费不必要的时间和流量。
3、基于请求和响应:基本的特性,由客户端发起请求,服务端响应
4、简单快速、灵活
5、通信使用明文、请求和响应不会对通信方进行确认、无法保护数据的完整性

 

HTTPS特点:
通过SSL或TLS提供加密处理数据、验证对方身份以及数据完整性保护

报文从运用层传送到运输层,运输层通过TCP三次握手和服务器建立连接,四次挥手释放连接

9、vue生命周期可以总共分为8个阶段:

beforeCreate(创建前),
created(创建后),
beforeMount(载入前),
mounted(载入后),
beforeUpdate(更新前),
updated(更新后),
beforeDestroy(销毁前),
destroyed(销毁后)

10、dependencies和devDependencies区别
vue-cli3.x项目的package.json中,有两种依赖:
dependencies:项目依赖。在编码阶段和呈现页面阶段都需要的,也就是说,项目依赖即在开发环境中,又在生产环境中。如js框架vue、页面路由vue-router,各种ui框架antd、element-ui、vant等。
devDependencies: 开发依赖。仅仅在写代码过程中需要使用,比如css预处理器、vue-cli脚手架、eslint之类。


1. 了解项目过程中所做的事情,能否讲清楚
2. 项目中所用到的技术,碰到的问题,如何解决,能否讲清楚

3. 小程序的开发流程也要了解。

11、vue和React分别使用了多久

12、 vue的响应式机制问题?就是当state特别多的时候,Watcher会不会很多,会导致导致什么样的结果。
react的性能优化需要手动去做,而vue的性能优化是自动的,但是vue的响应式机制也有问题,就是当state特别多的时候,Watcher也会很多,会导致卡顿,所以大型应用(状态特别多的)一般用react,更加可控。

13、什么是虚拟DOM?

虚拟DOM(VDOM)它是真实DOM的内存表示,一种编程概念,一种模式。它会和真实的DOM同步,比如通过ReactDOM这种库,这个同步的过程叫做调和(reconcilation)。

虚拟DOM更多是一种模式,不是一种特定的技术。

小程序———————————————————————————————————-

1、小程序的生命周期有哪几个?

2、说一说onLaunch(on lao ch),onLoad(on 老de)或onShow的区别

vue面试题——————————————————————————————–

实现token鉴权的步骤

说一下Vuex的使用过程?mutation(咪tei森) 使用来做什么的

Vuex 的五大核心

其中state和mutation是必须的,其他可根据需求来加
1、state

负责状态管理,类似于vue中的data,用于初始化数据

2、mutation

专用于修改state中的数据,通过commit触发

3、action

可以处理异步,通过dispatch触发,不能直接修改state,首先在组件中通过dispatch触发action,然后在action函数内部commit触发mutation,通过mutation修改state状态值

4、getter

Vuex中的计算属性,相当于vue中的computed,依赖于state状态值,状态值一旦改变,getter会重新计算,也就是说,当一个数据依赖于另一个数据发生变化时,就要使用getter

说一说vue缓存的keepalive页面刷新数据的方法?

activated(ai di wei lei te)

 

React部分面试题———————————————————————————————-

state 和 props有什么区别?

难度::star::star:

state 和 props都是普通的JavaScript对象。尽管它们两者都具有影响渲染输出的信息,但它们在组件方面的功能不同。即

  • props 是一个从外部传进组件的参数,主要作为就是从父组件向子组件传递数据,它具有可读性和不变性,只能通过外部组件主动传入新的 props 来重新渲染子组件,否则子组件的 props 以及展现形式不会改变。
  • state 的主要作用是用于组件保存、控制以及修改自己的状态,它只能在 constructor 中初始化,它算是组件的私有属性,不可通过外部访问和修改,只能通过组件内部的 this.setState 来修改,修改 state 属性会导致组件的重新渲染。

Q11 :什么是JSX?

难度::star::star::star:

JSX即JavaScript XML。一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖,也是react.js的使用基础。React在不使用JSX的情况下一样可以工作,然而使用JSX可以提高组件的可读性,因此推荐使用JSX。

class MyComponent extends React.Component {
  render() {
    let props = this.props;  
    return (
      <div className="my-component">
      <a href={props.url}>{props.name}</a>
      </div>
    );
  }
}

优点:

1.允许使用熟悉的语法来定义 HTML 元素树;

2.提供更加语义化且移动的标签;

3.程序结构更容易被直观化;

4.抽象了 React Element 的创建过程;

5.可以随时掌控 HTML 标签以及生成这些标签的代码;

6.是原生的 JavaScript。

ReactJS生命周期有哪些不同阶段?

难度::star::star::star:

React组件的生命周期分为四个不同阶段:

  1. 初始化: 在此阶段,react组件准备设置初始状态和默认道具。
  2. 挂载: react组件已准备好挂载在浏览器DOM中。此阶段涵盖 componentWillMount 和 componentDidMount 生命周期方法。
  3. 更新: 在此阶段,组件以两种方式进行更新,即发送新道具和更新状态。此阶段涵盖了 shouldComponentUpdate,componentWillUpdate和componentDidUpdate 生命周期方法。
  4. 卸载: 在最后一个阶段,不需要该组件,并且可以从浏览器DOM上卸载该组件。此阶段包括 componentWillUnmount 生命周期方法。

评论0

请先

没有账号? 忘记密码?