前端笔试题(一)

1.vue如何实现数据的双向绑定

  • 利用v-model来实现双向数据绑定

  • 通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图

2.使用vue渲染大量数据时,如何进行优化(思路)

  • 分页:将数据分成多个页面,每次只加载当前页面的数据,减少一次性加载大量数据的压力(可以使用分页组件或者手动分页)

  • 虚拟滚动:只渲染可见区域的数据,而不是全部数据。通过监听滚动事件,动态计算可见区域的数据,并只渲染这部分数据,可以大大提高渲染的性能(可以使用第三方库实现虚拟滚动,例如:vue-virtual-scroller)

  • 懒加载:只在需要时加载数据。例如,当用户滚动到某个位置时,再加载该位置附近的数据。可以结合虚拟滚动实现懒加载。

  • 虚拟DOM:Vue 的虚拟 DOM 会对整个数据集进行比对,找出差异并更新 DOM。对于超大数据集,可以考虑使用差异化算法,只对变化的部分进行更新,减少渲染的时间

  • 监听和计算属性

  • nextTick:将渲染任务放到事件循环的下一个tick中执行

  • 异步组件:async和await

  • 缓存组件:keep-alive。当在组件之间切换的时候,有时会想保持这些组件的状态,以避免复重渲染导致的性能等问题,使用包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。

  • v-for:使用 Vue 的列表组件(如 v-for)进行渲染,而不是手动操作 DOM。Vue 的列表组件在渲染大量数据时有优化措施,可以提高性能。

  • v-show和v-if:但是需要注意,一个页面当中不能大量使用v-if,要不然也会造成性能问题

3.分别写出jQuery、vue、小程序、uniapp中本地存储数据和接收数据是什么

  • jQuery和vue

    • 本地存储的三种方式:cookie、localstorage、sessionstorage

    • 通过Ajax来从服务器接收数据

  • 小程序

    • wx.setStorageSync(key,data):其中key时数据的键,data时要存储的数据

    • 可以通过发送网络请求来接收服务器端的数据。使用wx.request方法发送请求,并使用回调函数处理返回的数据.

  • uniapp

    • uni.setStorageSync(key,data)

    • 和小程序类似,在uni-app中也可以通过发送网络请求来接收服务器端的数据。使用uni.request方法发送请求,并使用回调函数处理返回的数据。

4.数组去重有哪些方式,请写出1-2种你觉得最优的方案(前两个最优)

  • set(最优)

    • 一大特性:不允许有重复值的存在

    • 这种方法简洁明了,利用Set的特性确保了数组中的元素唯一性

    • 弊端:他无法去重引用类型的数据

      const arr = [1,1,2,2,3,3,4,4,5,5];
      const setData = Array.from(newSet(arr));
      console.log(setData);

  • 双重for循环

    • 如果需要支持旧版本的 JavaScript 引擎,或者对数组元素的顺序有特殊要求,可以选择使用遍历+判断的方式

    const res1 = [1, 2, 2, 3, 1, 5, 2]
    for (let i = 0; i < res1.length; i++) {
        for (let j = i + 1; j < res1.length; j++) {
            if (res1[i] === res1[j]) {
                res1.splice(j, 1)
                j--
            }
        }
    }
    console.log(res1)

  • indexof

    • 在ES5及以下的环境中,可以使用indexOf或includes方法进行数组去重

      function uniqueArray(arr) {
        var result = [];
        for (var i = 0; i < arr.length; i++) {
          if (result.indexOf(arr[i]) === -1) {
            result.push(arr[i]);
          }
        }
        return result;
      }

  • includes

    • includes的判断方法:循环数组的每一样,用新数组检测当前数组中是否包含数组项,如果不包含,则追加该元素

      function uniqueArray(arr) {
        var result = [];
        for (var i = 0; i < arr.length; i++) {
          if (!result.includes(arr[i])) {
            result.push(arr[i]);
          }
        }
        return result;
      }

5.var、let、const的区别

  • var:

    • 声明的变量存在变量提升

    • 声明的是全局变量

    • 可以重复声明相同的变量名

  • let

    • 声明的变量不存在变量提升

    • 声明的是局部变量(块级作用域)

    • 不可以重复声明相同的变量名

    • 可以重新进行赋值

  • const

    • 声明的常量不存在常量提升

    • 声明的是局部常量(块级作用域)

    • 不可以重复声明相同的常量名

    • 如果是基本数据类型的话,不允许重新进行赋值;如果是引用数据类型的话,可以重新赋值

6.什么时候需要清除浮动,清除浮动的方式有哪些

什么时候需要清除浮动

  • 父盒子没设高

  • 子盒子使用了浮动

  • 影响到了布局

清除浮动的方式

  • 给父元素加高

  • overflow:hidden

  • 给使用浮动元素后面添加空的块元素,添加clear: both

  • 给使用浮动的父级添加 after 伪类

    /* #father::after{content: ""; display: block; clear: both;} */

7.行内元素、块级元素、空元素有哪些

行内元素

span、a、input、button、img、textarea、label(标签为 input 元素定义标注(标记))、select(单选或多选)

块级元素

div、p、h1-h6、dl、ul、ol、li、table(表格)、td(单元格)

空元素

hr、br、link、template(vue中的)

8.==和===的区别

==:

  • 只判断值是否正确,可能会有隐式类型转换的情况

===:

  • 先会判断值是否相等

  • 类型之间不可以进行隐式转换

  • 判断当前值的数据类型是否相等

  • (三个条件都成立才会达到===)

9.谈一谈你对MVVM模式的理解

是vue的底层原理,是一种设计模式

全称是model-view-ViewModel

model是数据模型,view时UI组件,ViewModel时model层和view层之间的桥梁。view层的数据变化会同步到model中,model的数据更新也会立刻反应到view层上,ViewModel通过双向数据绑定把view层和model层连接起来

10.vue的生命周期有哪些

vue2

beforeCreate --创建前

Created --创建后

beforeMount --挂载前

Mounted --挂载后

beforeUpdate --更新前

Updated --更新后

beforeDestroy --销毁前

Destroyed --销毁后

vue3

setup --创建前后

onBeforeMount --挂载前

onMounted --挂载后

onBeforeUpdate --更新前

onUpdated --更新后

onBeforeUnmount --销毁前

onUnmounted --销毁后

你可能感兴趣的:(前端,javascript,vue.js)