Vue高频面试题整理-1我们改变不了我们所处的环境，只能改变自己，你自己硬实力，软实力变得更强的时候，你可选择的就会比较

1、解释单向数据流和双向数据绑定

对于 Vue 来说，组件之间的数据传递具有单向数据流这样的特性称为单向数据流，单向数据流(Unidirectional data fow)方式使用一个上传数据流和一个下传数据流进行双向数据通信，两个数据流之间相互独立，单向数据流指只能从一个方向来修改状态。

而双向数据绑定即为当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化，两个数据流之间互为影响。

2、0bject.defineProperty有什么缺点

无法监听es6的set、Map 变化;

无法监听class类型的数据;

属性的新加或者删除也无法监听;

数组元素的增加和删除也无法监听。

3、对MVC，MVP，MVVM的理解

1. MVC

用户对View操作以后，View捕获到这个操作，会把处理的权利交移给Controller (Pass calls) ; Controller会对来自View数据进行预处理、决定调用哪个Model的接口; 然后由Model执行相关的业务逻辑 (数据请求) ;当Model变更了以后，会通过观察者模式 (Observer Pattern) 通知View;View通过观察者模式收到Model变更的消息以后，会向Model请求最新的数据，然后重新更新界面。

把业务逻辑和展示逻辑分离，模块化程度高。但由于View是强依赖特定的Model的，所以View无法组件化，无法复用。

0fe2562a640c4a3f8364648c720c18a2~tplv-k3u1fbpfcp-jj-mark_3024_0_0_0_q75.jpg

2. MVP

和MVC模式一样，用户对View的操作都会从View交移给Presenter。Presenter会执行相应的应用程序逻辑，并且对Model进行相应的操作;而这时候Model执行完业务逻辑以后，也是通过观察者模式把自己变更的消息传递出去，但是是传给Presenter而不是View。Presenter获取到Model变更的消息以后，通过View提供的接口更新界面。

View不依赖Model，View可以进行组件化。但Model->View的手动同步逻辑，麻烦，维护困难。

2.awebp

3.MVVM

MVVM的调用关系和MVP一样。但是，在ViewModel当中会有一个叫Binder，或者是Data-binding engine的东西。你只需要在View的模版语法当中，指令式地声明View上的显示的内容是和Model的哪一块数据绑定的。当ViewModel对进行Model更新的时候，Binder会自动把数据更新到View上去，当用户对View进行操作(例如表单输入) ，Binder也会自动把数据更新到Model上去。这种方式称为: Two-way data-binding，双向数据绑定。可以简单而不恰当地理解为一个模版引擎，但是会根据数据变更实时渲染。

解决了MVP大量的手动View和Model同步的问题，提供双向绑定机制。提高了代码的可维护性。对于大型的图形应用程席，视图状态较多，ViewModel的构建和维护的成本都会比较高。

3.awebp

4、生命周期

vue2	vue3
beforeCreate	setup
created	setup
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

beforeDestroy=>原方法beforeUnmount

destroyed=>原方法unmounted

import { onUnmounted, onMounted } from 'vue'

setup () {
   ...
   onMounted(() => {
    
     console,log( 'onMounted' )
      
   })
   ...
}

5、你知道Vue响应式数据原理吗? Proxy与object.defineProperty 优劣对比?

响应式原理

vue的响应式实现主要是利用了object.defineproperty的方法里面的setter 与getter方法的观察者模式来实现在组件初始化时会给每一个data属性注册getter和setter，然后再new 一个自己的watcher对象，此时watcher会立即调用组件的render函数去生成虚拟DOM。在调用render的时候，就会需要用到data的属性值，此时会触发getter函数，将当前的watcher函数注册进sub里。当data属性发生改变之后，就会遍历sub里所有的watcher对象，通知它们去重新渲染组件。

proxy的优势如下:

Proxy 可以直接监听对象而非属性，可以直接监听数组的变化;Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是object.defineProperty 不具备的;Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 obiect.defineproperty 只能遍历对象属性直按修改;

object.defineProperty 的优势如下:

兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfi11(垫片)来弥补

6、Composition API 的出现带来哪些新的开发体验，为啥需要这个?

1、在Compostion API 中是根据逻辑相关组织代码的，提高可读性和可维护性，类似于react的hook写法;

2、更好的重用逻辑代码，在options API中通过MIxins重用逻辑代码，容易发生命名冲突且关系不清。不把相关逻辑分离到了几个不同方法中的问题，如在mounted中。

3、解决在生命周期函数经常包含不相关的逻辑，但又不得设置定时器，但需要在destroyed中来清除定时器，将同功能的代码拆分到不同的位置，造成后期代码维护的困难。

7、对比jQuery，Vue 有什么不同

jquery 专注视图层，通过直接操作 DOM 去实现页面的表现在 DOM 层面，减少了 DOM 操作。Vue 使用了组件用，便于协同开发。

8、如何再Vue的单文件组件里的样式定义全局CSS?

在style标签上不加上scoped的属性，默认为全局css样式。

9、`说一下 $root，$parent，$refs`

$root和$parent都能访问父组件的属性和方法，区别在于如果存在多级子组件，通过parent 访问得到的是它最近级的父组件，通过root 访问得到的是根父组件。通过在子组件标签定义 ref 属性，在父组件中可以使用 $refs 访问子组件实例。

10、vue 中怎么自定义指令

通过directive来自定义指令，自定义指令分为全局指令和局部指令，自定义指令也有几个的钩子函数，常用的有bind和update，当 bind 和 update 时触发相同行为，而不关心其它的钩子时可以简写。


Vue.directive('focus', {
  //当被绑定的元素插入到 DOM 中时....
  inserted: function (el) {
    //聚焦元素
    el.focus();
  }
})

Vue.directive('color-swatch', function (el, binding) {
   el.style.backgroundColor = binding.value
})

写在最后

码字不易，谢谢关注、点赞和转发。

越笨拙，越努力；越努力，越幸运；大家加油!

Vue高频面试题整理-1