2021前端面试题精选-vue篇

1.vue的生命周期

        vue实例从创建到销毁的过程就是生命周期。

        beforecreate：创建前、只加载了new操作

        created：创建后、加载了方法和data数据

        beforemounte：挂载前：找到了要渲染的dom节点，但是还未渲染

        mounted：挂载后：渲染所有界面上的数据

        beforeupdate：更新前：页面的数据是旧的，但data里面的数据是最新的，还未渲染到界面

        updated：更新后：页面和data数据都是最新的数据

        beforedestroy：销毁前：此时还没进行真的销毁，所有组件还是可用

        destroy：销毁后：此时的数据和方法已经全部销毁

2.v-if和v-show的区别

        v-if和v-show都是用来控制组件的显示与隐藏的，但是显示与隐藏的方式不同

        v-show：通过css内的display：none来控制组件的显示与隐藏

        v-if：通过动态的删除和添加dom组件来进行显示与隐藏

        v-show在需要多次调用的时候使用比较合适，因为消耗小，但是初次消耗大，v-if在少次调用或者只调用一次的时候使用，因为它的切换渲染开销大。

3..async await是什么?它有哪些作用?
        async await是es7里面的新语法、它的作用就是async用于申明一个function是异步的，而await用于等待一个异步方法执行完成。它可以很好的替代promise 中的then
        async函数返回一个Promise对象，可以使用then方法添加回调函数。当函数执行的时候
一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

4.常用的数组方法

        find（）用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

[1,3,5,9,12].find(n=>{ n<5 })

        findIndex()用于找出第一个符合条件的数组成员的下标，跟find（）差不多

includes（）用来查找数组中是否包含当前元素，若包含则返回true，否则为false

[1,2,5,6,9,16].includes(2) //为true

        indexof()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。(通常用它判断数组中有没有这个元素)
        join()用来将数组合并成字符串，括号里面表示用什么作为连接，如果不填则用逗号进行连接

        pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度

        push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。
        shift()方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
        unshift()用来在数组最前面添加一个元素，并且返回长度。

        splice()用来动态修改，删除，添加数组里面的元素，并且返回修改，删除，添加的元素

splice里面有三个值，第一个为要修改删除的元素位置，第二个为要修改删除几个，第三个为修改后的值。

        sort（）将数组排序然后返回

5.数组有哪几种循环方式?分别有什么作用?
        every()方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
        filter()方法创建一个新数组,其包含通过所提供函数实现的测试的所有元素。
        forEach()方法对数组的每个元素执行─次提供的函数。
        some()方法测试是否至少有一个元素可以通过被提供的函数方法。该方法返回一个Boolean类型的值。

持续更新，每天看时间更新几道面试题，下方评论，我发面试题。