Vue面试与解答

01-typeof和instanceof的区别？

二者都是数据类型的检测方式。

  - typeof：其中数组、对象、null都判断为object，其他都判断正确。
  - instanceof：只能正确判断引用数据类型，不能判断基本数据类型。

02-JS的基本数据类型？

1. undefined
2. null
3. boolean
4. string
5. number
6. symbol
7. bigint

   03-typeof（null）是什么？

   object

   04-什么是深拷贝和浅拷贝？如何实现？

   浅拷贝：指的是创建新的数据，这个数据有原始数据属性值的精确拷贝。 如果属性是基本数据类型，拷贝的就是基本数据类型的值；如果属性是引用数据类型，拷贝的就是内存地址。

深拷贝：开辟一个新的栈，两个对象属性完全相同，但是对应两个不同的地址，修改其中一个，不会改变另一个。 常见的深拷贝方法：

  - _.cloneDeep();
  - jQuery.extend();
  - JSON.stringify();
  - 手写递归循环；

05-如何创建一个没有原型的对象？

通过Object.create(proto，[propertiesObject])
proto:新创建对象的原型对象。propertiesObject：可选。

06-详细介绍vue的生命周期。

1. 创建前（beforeCreate）：数据观测和初始化还未开始，data、computed、watch、methods还无法访问。
2. 创建后（created）：实例创建完成，data、computed、watch、methods配置完成，还未挂载到DOM。
3. 挂载前（beforeMount）：实例完成编译模板配置，把data里面的数据和模板生成html。
4. 挂载后（mounted）：用编译完成的html，替换el指向的DOM对象。
5. 更新前（beforeUpdate）：响应式数据更新，但还未渲染。
6. 更新后（updated）：数据更改导致虚拟DOM重新渲染，数据已经更新。
7. 卸载前（beforeDestroy）：此时实例仍然可用，this能获取到实例。
8. 卸载后（destroyed）：所有指令解除绑定。

被包裹的组件有两个独有的生命周期。

     1. deactivated：切换，缓存到内存中。
     1. activated：命中渲染时调用。

07-什么是扩展运算符？是深拷贝还是浅拷贝？

对象的扩展运算符（…）用于取出参数对象中的所有可遍历属性，拷贝到当前的对象中。

• 如果只是一层数组或对象，其元素只是简单类型的元素，那么属于深拷贝。
• 如果数组或对象中的元素是引用类型元素，那么就是浅拷贝。

  08-call、bind、apply的区别是什么？

  call、bind、apply的作用是改变函数执行时的上下文，简单来说就是改变this的指向。

• call:第一个参数是this的指向，后面传入的是一个参数列表。改变指向后立即执行，且只是临时改变this指向一次。
• bind：第一个参数是this的指向，后面传入的是一个参数列表。改变指向后不会立即执行，而是返回一个永久改变this指向的函数。
• apply：第一个参数是this的指向，后面传入的是一个参数列表，以数组的形式。改变指向后立即执行，且只是临时改变this指向一次。

总结：

• 三者都可以改变this对象的指向
• 三者第一个参数都是this要指向的对象，如果没有这个参数或者为undefined或null，则默认指向全局window

• 三者都可以传参，但是apply是数组，call是参数列表，且apply和call是一次性传入参数，而bind是返回绑定this之后的函数，apply和 call则是立即执行。

  09-vue组件通信的方式。

     1. 父子通信
        1. `props`/`$emit`:子组件通过`props`接收父组件数据，父组件在子组件上注册监听事件，子组件通过`$emit`触发事件向父组件发送数据。
        1. `ref`/`$refs`:通过ref给子组件设置一个名字，父组件通过$refs获取子组件，子组件通过`$parent`获取父组件，实现通信。
        1. `provide`/`inject`:在父组件中，`provide`提供变量，在子组件中通过`inject`将变量注入。
     2. 兄弟组件间通信
        1. eventBus:通过创建一个空的Vue实例作为传递数据的对象，通信的组件引入这个实例，通过在这个实例上监听和触发事件，来实现消息的传递。
        1. `$parent`/`$refs`:通过`$parent`/`$refs`来获取到兄弟组件，进行通信。
     3. 任意组件通信
        1. eventBus:创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。

在业务逻辑复杂，且需要同时处理公共数据，可以使用vuex。

10-箭头函数和普通函数的区别。

1. 外形不同：箭头函数使用箭头定义，普通函数没有。
2. 箭头函数都是匿名函数，普通函数可以是具名函数也可以是匿名函数。
3. 箭头函数不能用于构造函数，普通函数可以，并以此创建对象实例。
4. 箭头函数中的this指向自身，普通函数指向调用它的对象，如果是构造函数，指向创建的实例对象。
5. 箭头函数不具有arguments对象，每个普通函数调用后都有。
6. 箭头函数不具有prototype原型对象，不具有super，不具有new.target

   11-防抖和节流

   1-防抖基本概念
   防抖具体指的是某个函数在某段时间内，无论触发了多少次回调，都只执行最后一次。假如我们设置了一个等待时间 3 秒的函数，在这 3 秒内如果遇到函数调用请求就重新计时 3 秒，直至新的 3 秒内没有函数调用请求，此时执行函数，不然就以此类推重新计时
   2- 防抖实现原理
   防抖实现原理就是利用定时器，函数第一次执行时设定一个定时器，并且通过闭包缓存起来，之后调用时发现已经设定过定时器就清空之前的定时器，并重新设定一个新的定时器，如果存在没有被清空的定时器，当定时器计时结束后触发函数执行。
   3- 节流基本概念
   函数节流指的是某个函数在一定时间间隔内（例如 3 秒）只执行一次，在这 3 秒内 无视后来产生的函数调用请求，也不会延长时间间隔。3 秒间隔结束后第一次遇到新的函数调用会触发执行，然后在这新的 3 秒内依旧无视后来产生的函数调用请求，以此类推。函数节流非常适用于函数被频繁调用的场景，例如：window.onresize() 事件、mousemove 事件、上传进度等情况。
   4- 节流实现原理
   实现原理就是通过一个布尔类型变量来判断是否可执行回调，当变量为true时，生成一个定时器，同时将变量取反通过闭包保存起来，当定时器执行完回调后，再将变量变为true，在变量为期false间，调用节流函数不会生成定时器。

5- 使用场景

1. 滚动事件
2. 输入的模糊搜索
3. 轮播图切换

4. 点击操作

   12-小程序跨端如何解决？

   vue语法使用mpvue、uni-app、Taro框架实现跨端。
   跨端框架把Vue单文件中的