千锋教育web前端高频面试题视频教程，kerwin大话前端面试秘籍（附答案）

P13

1、单向数据流：

在Vue中，数据流是单向的，从父组件向子组件进行数据传递。父组件通过props向子组件传递数据，子组件接收并使用这些数据。子组件不能直接修改父组件传递的数据，只能通过触发事件来向父组件传递数据变化。

双向数据绑定：

双向数据绑定允许数据在父组件和子组件之间进行双向的同步更新。在Vue中，可以使用v-model指令实现双向数据绑定。

补充v-model 语法糖的实现方式    

模型到视图：给 input 输入框的 value 属性绑定模型值 <input v-bind:value="模型时" />

视图到模型：监听 input 输入框的 input 事件，然后去更改对应的模型值 <input @input="changeXxx"/>

2、Object.defineProperty有什么缺点!

1、无法监听es6的set、Map 变化:只能监听对象的属性变化，无法直接监听 ES6 中的 Set 和 Map 数据结构以及其内部的变化。

2、无法监听class类型的数据:只能监听对象的属性变化，无法直接监听 Class 实例的属性变化。

3、属性的新加或者删除也无法监听:只能监听对象已有属性的变化，无法监听属性的新增或删除。

4、数组元素的增加和删除也无法监听:可以通过对数组的方法进行劫持来实现监听，但这种方式并不方便。

为了解决上述问题，Vue3采用了更强大的 Proxy 对象来监听属性的变化。Proxy 对象具有更多的优势和灵活性，可以监听更多类型的数据变化。

3、对MVC,MVP,MVVM的理解

MVC是一种将应用程序分成模型、视图和控制器三个部分的架构模式，用于分离关注点和管理代码结构。

MVP是在MVC模式基础上的改进，引入了Presenter来处理视图和模型之间的通信。

MVVM是一种用于构建客户端应用程序的架构模式，结合了数据绑定和命令模式，通过ViewModel实现视图和模型的解耦。

4、生命周期

版本2的生命周期方法：

beforeCreate：在实例被创建之前调用，此时组件的选项和观察者都未初始化。

created：在实例创建完成后用，此时可以访问到组件的选项和观察者。

beforeMount在挂载之前调用，此时但还未替换挂载的DOM元素。

mounted：在组件挂载到DOM之后调用，此时可以访问到DOM元素。

beforeUpdate：在组件更新之前调用，此时组件数据发生变化。

updated：在组件更新之后调用，此时DOM已经更新完成。

beforeDestroy：在组件销毁前调用。

destroyed：在组件销毁之后调用。

版本3的生命周期方法（使用Composition API）：

setup：在组件过程调用，可以用来组件状态和逻辑。

onBeforeMount：在组件挂载到DOM之前调用。

onMounted：在组件挂载到DOM之后调用。

onBeforeUpdate：在组件更新之前调用。

onUpdated：在组件更新之后调用。

onBeforeUnmount：在组件销毁前调用。

onUnmounted：在组件销毁之后调用。

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

响应式原理：

kerwin老师笔记提取

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

Proxy的优点：

可以监听对象的新增、删除和修改操作，无需特殊处理。

可直接监听数组的变化，无需特殊处理。

性能较好，无需遍历对象的每个属性。

功能更强大，可以拦截更多操作。

Proxy的缺点：

兼容性不如Object.defineProperty，无法在旧版浏览器中使用。

Object.defineProperty的优点：

支持所有现代浏览器，包括IE9+等旧版本浏览器。

可以对已有对象的属性进行劫持。

可以监听属性的读取和写入操作。

Object.defineProperty的缺点：

对新增或删除的属性无法直接监听，需要额外处理。

需要遍历对象的每个属性，性能较低。

无法直接监听数组的变化，需要使用特殊方法。

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

kerwin老师笔记提取

1:在Compostion API 中时根据逻辑相关组织代码的，提高可读性和可维护性，类似于react的hook写法。2:更好的重用逻辑代码，在options API中通过MIxins重用逻辑代码，容易发生命名冲突且关系不清。3:解决在生命周期函数经常包含不相关的逻辑，但又不得不把相关逻辑分离到了几个不同方法中的问题，如在mounted中没置定时器，但需要在destroyed中来清除定时器，将同一功能的代码拆分到不同的位置，造成后期代码维护的困难。

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

响应式能力：Vue是一个完整的MVVM（Model-View-ViewModel）框架，内置了响应式能力，可以自动追踪数据的变化并实时更新视图。而jQuery并没有内置响应式能力，需要手动操作DOM来更新视图。

组件化开发：Vue采用组件化开发的思想，将界面拆分成独立的可复用组件，每个组件有自己的模板、逻辑和样式。这样可以极大地提高代码的可维护性和复用性。而在jQuery中，通常将操作封装成函数，但没有明确的组件概念。

数据驱动视图：Vue通过数据绑定实现视图和数据的自动同步。开发者只需要关注数据的变化，Vue会自动更新相关的视图。而在jQuery中，开发者需要手动操作DOM来实现视图的更新。

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

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

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

$root属性指向Vue实例的根组件。它允许您从任何子组件访问根组件的数据和方法。通过this.$root可以访问根组件的实例。

$parent属性指向当前组件的父组件实例。可以使用this.$parent访问父组件的数据和方法。需要注意的是，使用$parent会使组件和父组件之间产生紧耦合，不太推荐频繁使用。

$refs属性用于在模板或组件中引用元素或子组件。您可以给元素或组件设置ref属性，然后通过this.$refs访问引用的元素或组件实例。

10、Vue 中怎么自定义指令

全局注册指令是在Vue实例化之前，在项目的入口文件（通常是main.js）中使用Vue.directive全局方法注册指令。这样注册的指令可以在整个应用程序中的任何组件中使用。

局部注册指令是在组件中定义并注册指令，这样指令只在该组件内部可用。通过在组件选项中的directives属性中定义指令，可以在组件的模板中使用自定义指令。

在自定义指令的选项中，可以利用多个钩子函数来定义指令的行为，常见的有bind、inserted、update、componentUpdated和unbind等。每个钩子函数会接收三个参数：指令所绑定的元素(el)，指令的绑定值(binding)和Vue编译生成的虚拟节点(vnode)。