vue面试题整理（1.0）_代码007(未授权)

首页
vue
正文

本文介绍: computed：是计算属性，依赖其他属性值，并且com put e d的值有缓存，当依赖的属性值发生改变时，才会重新计算 com put e d的值，默认是只读的（相当于get t e r 函数），它也可以设置 getter和setter函数来完成读和写。（1）、造成数据混乱：如：一个父级组件的数据传递给多个子组件，某个子组件如果通过Prop s 修改父组件的数据，父级组件再修改其他子组件，其他子组件就会莫名其妙的被修改，造成数据混乱。watch：属性变化的检测（相当于事件），当属性的值发生变化时，可以调用函数。

一、对MVC，MVP，MVVM的理解

三者都是项目的架构模式（不是类的设计模式），即：一个项目的结构，如何分层，不同层负责不同的职责。

1.MVC

MVC的出现是用在后端（全栈时代）

M：model，模型：

主要完成业务功能，在数据库相关的项目中，数据库的增删改查属于模型。没有页面，是纯粹的逻辑。

V：view，视图：

主要负责数据的显示（HTML+CSS，动态网页（jsp，含有HTML的PHP文件））页面的展示和用户的交互。

C：controller，控制器：

主要负责每个业务的核心流程，在项目中体现在路由以及中间件上（nodeJs中的routes 文件夹）

2.MVP

MVP是把MVC中的C改成了P。主要限制了M和V之间不能直接通信（互相调用，传递数据）。M和V之间的通信必须经过P。

P：Presenter，表示器

主要用于连接M层、V层，完成Mo del层与View层的交互，还可以进行业务逻辑的处理。

3.MVVM：

MVVM是把MVP中的P改成了VM。主要体现的是M和V之间的双向绑定。View的变动可以同步相应在Mo del，反之亦然。Vue就是一个MVVM的框架。准确来说，使用Vue 框架完成项目时，使用的是MVVM模式。

VM：ViewMo del

主要完成M和V的数据通信，并且是双向绑定。而View和Mo del之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理。

总结：所有的MV*的项目的架构模式：都是为了完成项目代码的职责分工。

二、v–if和v–show 区别

相同点：都是用来控制Dom 元素的显示和隐藏。

不同点：

1.原理上：

v-if是通过添加和删除Dom 元素，来控制Dom 元素的显示和隐藏。

v-show是通过控制Dom 元素样式的display属性的值，来控制Dom 元素的显示和隐藏。

2.性能损耗

v-if：性能损耗主要体现在频繁切换时

v-show：性能损耗主要体现在首次。

3.应用场景：

v-if：用于切换不频繁的场景

v-s how:用于切换频繁的场景。

4.安全性：
v-if:安全性好。（如果Dom元素不显示时，在Elements里根本看不到）

v-s how:安全性不好。（如果Dom元素不显示时，在elements里依然可以看到，那么，懂程序的人，既可以修改）

三、com puted和watch的区别

1.相同点：

都可以监听数据

2.不同点：

（1）概念：

com puted：是计算属性，依赖其他属性值，并且com puted的值有缓存，当依赖的属性值发生改变时，才会重新计算 com puted的值，默认是只读的（相当于getter函数），它也可以设置 getter和setter函数来完成读和写。

watch：监听器，更多的是观察的作用，每当监听的数据变化时都会执行回调进行后续操作，它只能设置getter。watch默认只监听一层，如果要深度监听，让deep属性为true。

（2）作用：

co mputed：为了显示而用，降低了模板上代码复杂度。

watch：属性变化的检测（相当于事件），当属性的值发生变化时，可以调用函数。主要处理异步以及开销比较大的操作。简单粗暴的理解为：一个函数的执行时机。

（3）依赖模板调用：

co mputed：只能在模板上使用。

watch：不能在模板上使用。

（4）是否异步：

co mputed：不能有异步，只能同步。

watch：可以有异步。

（5）立即执行：

co mputed：是立即执行。

watc h:默认不是立即执行。如果要立即执行，增加属性：im mediate。

补充：在写代码时，把函数定义和调用时机分开。

四、Vue2的响应式原理

响应式：当js中的数据发生变化时，模板上会对应的发生变化。

1.数据劫持：

目的：当数据发生变化时，Vue 框架会感知到。

怎么做的：利用ES5的Object.definePro perty（）。当实例化组件时，Vue框架内部会把定义在组件data里的所有数据（属性），进行遍历，给每个数据（属性）增加setter和getter函数（同时会做订阅）。当数据发生变化时，会调用setter函数。当获取数据时，会调用getter函数。