vue、react面试题合集(附答案)中文PDF版.pdf资源-CSDN文库

vue.js

react.js

54 浏览量 2024-06-11 09:45:40 上传评论收藏 6.5MB PDF 举报

资源推荐

资源详情

资源评论

vue（包含vue3）、react面试题合集 (附答案) 中文PDF版

一、vue

说说vue动态权限绑定渲染列表（权限列表渲染）

权限分菜单、按钮等一般都是列表形式。

1. 首先请求服务器,获取当前用户的权限数据,比如请求 this.$http.get("rights/list");

2. 获取到权限数据之后,在列表中使用v-if v-if-else的组合来展示不同的内容

<div>

 

 <el-breadcrumb separator-class="el-icon-arrow-right">

  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>

  <el-breadcrumb-item>权限管理</el-breadcrumb-item>

  <el-breadcrumb-item>权限列表</el-breadcrumb-item>

 </el-breadcrumb>

 

 <el-card>

  <el-table :data="rightsList" border stripe>

   <el-table-column type="index" label="#"></el-table-column>

   <el-table-column label="权限名称" prop="authName"></el-table-column>

   <el-table-column label="路径" prop="path"></el-table-column>

   <el-table-column label="权限等级" prop="level">

    <template slot-scope="scope">

     <el-tag v-if="scope.row.level === '0'">一级</el-tag>

     <el-tag type="success" v-else-if="scope.row.level === '1'">二级</el-

tag>

     <el-tag type="danger" v-else>三级</el-tag>

    </template>

   </el-table-column>

  </el-table>

 </el-card>

</div>

</template>

export default {

data() {

 return {

  // 权限列表

  rightsList: []

 };

created() {

 this.getRightsList();

methods: {

 async getRightsList() {

  //获取权限列表数据

  const { data: res } = await this.$http.get("rights/list");

  if (res.meta.status !== 200) {

Vue用的哪种设计模式

属于发布订阅模式,在vue中使用observer和definereactive两个方法的结合对数据进行递归劫持,然后通过

watch这个类来对属性进行订阅,Dep类用于解耦合,当数据变更的时候先触发数据的set方法,然后调用

Dep.notiify通知视图更新

说说vue操作真实dom性能瓶颈

vue性能瓶颈的几种情况

1. 一次渲染大量的数据的时候,存在大量数据并且都是复杂类型的时候,会导致vue对数据的劫持时间

和渲染时间变长, js 连续执行时间过长，会导致页面长时间无法交互，而且渲染时间太慢，用户一

次交互反馈的时间过长。

优化方案:可以使用 requestAnimation 这个方法,将数据进行分割,分批次渲染,减少了 js 的

连续运行时间，并且加快了渲染时间，利用加长总运行时间换取了渲染时间，用户既能快速

得到反馈，而且不会因为过长时间的 js 运行而无法与页面交互。

2. 当页面中存在大量数据,只是修改了一小部分导致页面也会导致页面卡顿,因为vue的更新以组件为

粒度进行更新的，只要修改了当前组件中所使用的数据，组件就会整个去进行更新,造成大量的时

间浪费

优化方案:将不同的模块划分成不同的组件,这样有效降低虚拟dom的diff运算时间过长的问题,

比如将大量数据的模块单独放一个组件,其它放一个组件,由于vue是以组件为粒度更新,修改

其它组件的情况下不会导致table的重新diff,提升页面响应速度高达几百倍

3. 动态插槽作用域或者静态插槽的更新

使用插槽作用域来替换这两种操作方式,一样能提升性能,因为使用插槽作用域之后,插槽内容

会被封装到一个函数中,被子组件渲染,而不是在父组件

Vue中如何获取dom、操作dom、更新dom

如何获取dom？在Vue中提供了一种特别的方式来获取dom，即给dom加上个ref属性，那么就可以通过

this.$refs.名字来获取到该dom元素。

如何操作dom、更新dom？通过refs.名字就可以拿到对应的真实dom，然后就可以用原生JS进行操作和

更新。当然vue框架本身就是不需要dom操作的，通过修改相应的数据并再配合指令、模板语法就可以轻

松的操作和更新dom。

   return this.$message.error("获取权限列表失败！");

  }

  this.rightsList = res.data;

 }

}

};

</script>

</style>

Vue 的双向数据绑定原理是什么

在Vue2.x中，双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的，也就是说数据和视图同

步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变。核心：关于VUE双向数据绑定，

其核心是 Object.defineProperty()方法。

Vue3.x则是用ES6的语法Proxy对象来实现的。

Object.defineProperty()的缺点：

1. 只能监听对象(Object)，不能监听数组的变化，无法触发push, pop, shift, unshift,splice, sort,

reverse。

2. 必须遍历对象的每个属性

3. 只能劫持当前对象属性，如果想深度劫持，必须深层遍历嵌套的对象。

Proxy的优点：

1. Proxy 可以直接监听对象而非属性。

2. Proxy 可以直接监听数组的变化。

3. Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是

Object.defineProperty 不具备的。

4. Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对

象属性直接修改。

5. Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利。

mvvm框架是什么

MVVM是Model-View-ViewModel的简写。它本质上就是MVC（Model-View-Controller）的改进版。在开发过

程中，由于需求的变更或添加，项目的复杂度越来越高，代码量越来越大，此时我们会发现MVC维护起

来有些吃力，尤其Controller控制层非常的厚重，非常的庞大，难以维护。

所以有人想到把Controller的数据和逻辑处理部分从中抽离出来，用一个专门的对象去管理，这个对象就

是ViewModel。ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从

后端获取的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。

由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，这是激动人心的，因为前端开发者再也

不必低效又麻烦地通过操纵 DOM 去更新视图，MVVM 框架已经把最脏最累的一块做好了，我们开发者只

需要处理和维护 ViewModel，更新数据视图就会自动得到相应更新，真正实现数据驱动开发。

let arr = [];

let proxy = new Proxy(arr, {

 get: function(obj, prop){

  return obj[prop];

 },

 set: function(obj, prop, value){

  obj[prop] = value;  //可以被监听到变化

  return true;

 }

});

setTimeout(()=>{

 proxy.push(1);

}, 2000)

剩余173页未读，继续阅读

评论收藏

内容反馈

usp1994

粉丝: 4033
资源: 1035

vue、react面试题合集 (附答案) 中文PDF版.pdf

最新资源

vue、react面试题合集 (附答案) 中文PDF版.pdf

vue、react面试题大合集

vue面试题_vue常见面试题和答案[文].pdf

前端面试题合集VueReact小程序NodeJs

vue&react面试题.md

2022最新高频前端面试题汇总(vuereact) + 经典面试题初级中高级及答案 中文完整版

前端面试题库，包含Vue面试题React面试题JS面试题HTTP面试题

Vue or React面试题总结

2022年web前端最全面试题及答案【含vue-react】.docx

前端面试题库，包含不限于Vue面试题，React面试题，JS面试题，HTTP面试题，工程化面试题，CSS面试题

Vue面试题，React面试题，JS面试题，HTTP面试题，工程化面试题，CSS面试题，算法面试题，大厂面试题，高频面试题

vue面试题-vue常见面试题和答案.pdf

前端面试题html+css+js+ts+vue+react+uniapp

Git-2.44.0-64-bit.exe

软考：系统规划与管理师教材（官方标准版）

Git-2.45.1-64-bit.exe

基于微信小程序的点餐系统设计与实现 毕业论文.docx

PMP项目管理模板（全套157个文档）

Axure9元件库大合集（27种）

各种Excel甘特图模板30几个特别全

Rational Rose 2007

全国最新行政区划，包括省、市、区、街道四个级别(2024年5月15日-来源与腾讯地图)

（64位）Git-2.44安装包

CMMI模型V2.0_中文完整版.pdf

基于微信小程序图书馆座位预约系统设计与实现

超级实用的软件著作权申请源代码材料格式文档生成辅助工具-软著源代码生成工具

基于微信小程序点餐系统的设计与实现（含word论文）

基于Python的招聘网站爬虫及可视化的设计与实现(论文下载)

毕业设计-仓库管理信息系统设计与实现(论文+源码+ppt答辩+开题报告+任务书)

另一个非常实用且美观的Excel项目日期甘特图3

最新资源

2022最新高频前端面试题汇总(vuereact) + 经典面试题初级中高级及答案中文完整版

基于微信小程序的点餐系统设计与实现毕业论文.docx