【Vue框架基础(上)】 ------ 前端面试必备 --- 复习专用

1. Vue的核心(Vue的理解)

Vue是一套构建用户界面的渐进式自底而上增量开发的MVVM框架,核心是关注UI视图层、解决数据的绑定问题,为了开发大型单页面应用和组件化

核心思想:

  • 数据驱动(视图的内容随着数据的改变而改变)
  • 组件化(可以增加代码的复用性,可维护性,可测试性,提高开发效率, 方便重复使用,体现了高内聚低耦合)

2. Vue的优点

  • 轻量级框架:只关注视图层,是一个构建数据的视图集合
  • 简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习;
  • 双向数据绑定:保留了angular的特点,在数据操作方面更为简单;
  • 组件化:保留了react的优点,实现了html的封装和重用,在构建单页面应用方面有着独特的优势;
  • 视图,数据,结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作;
  • 虚拟DOM:dom操作是非常耗费性能的,不再使用原生的dom操作节点,极大解放dom操作,但具体操作的还是dom不过是换了另一种方式;
  • 运行速度更快:相比较与react而言,同样是操作虚拟dom,就性能而言,vue存在很大的优势。

3. MVVM、MVC

MVC和 MVVM 是常见的软件架构设计模式,优化开发效率。

MVC : Model - View - Controller
Controller(控制器):是应用程序中处理用户交互的部分,负责从视图读取数据,控制用户输入,并向模型发送数据.
思想: Controller 负责将 Model 的数据用 View 显示出来,换句话说就是在 Controller 里面把 Model 的数据赋值给 View。

MVVM : Model - View - ViewModel
Model 代表数据模型,在Model中定义数据修改和操作的业务逻辑;
View 代表UI视图,负责数据的展示;
ViewModel 负责监听Model中数据的改变并且控制视图更新,处理用户交互操作;

Model和View并无直接关联,而是通过ViewModel进行交互。
ViewModel通过双向数据绑定(model–>view: 数据绑定 ; view–>model: DOM 事件监听),把view层和model层连接了起来。当Model中的数据改变时会触发View层的刷新,View中由于用户交互操作而改变的数据也会在Model中同步。Vue.js就是一个MVVM的实现者,它的核心就是实现了DOM监听与数据绑定。

MVVM模式实现了 Model和View的数据自动同步,因此开发者只需要专注于数据的维护操作即可,而不需要自己操作DOM。

MVVM优缺点

  • 分离视图(View)和模型(Model),降低代码耦合,提⾼视图或者逻辑的重⽤性;
    提高可测试性: ViewModel的存在可以帮助开发者更好地编写测试代码 ;
    独立开发:开发人员可以专注于业务逻辑和数据的开发,从繁琐的⼿动dom中解放;

  • Bug很难被调试:
    界⾯异常,可能是View代码有Bug,也可能是Model的代码有问题;
    ⼀个⼤的模块中model也会很⼤,当⻓期持有,不释放内存就造成了花费更多的内存;
    对于⼤型的图形应⽤程序,视图状态较多,ViewModel的构建和维护的成本都会⽐较⾼;

MVVM 与 MVC 区别
MVVM实现了 View 和 Model 的自动同步,当 Model 的属性改变时,不用再自己手动操作 Dom 元素,来改变 View 的显示,而是改变属性后该属性对应 View 层显示会自动改变(对应Vue数据驱动的思想);
MVVM 比 MVC 精简很多,不仅简化了业务与界面的依赖,还解决了数据频繁更新的问题,不再用选择器操作 DOM 元素。

注意:Vue 并没有完全遵循 MVVM 的思想
严格的 MVVM 要求 View 不能和 Model 直接通信,而 Vue 提供了$refs 这个属性,让 Model 可以直接操作 View

4. Vue的基本原理

当一个Vue实例创建时,Vue会遍历data中的属性,用 Object.defineProperty(vue3.0使用proxy )将它们转为 getter/setter,并且在内部追踪相关依赖,在属性被访问和修改时通知变化。 每个组件实例都有相应的 watcher 程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的setter被调用时,会通知watcher重新计算,从而致使它关联的组件得以更新。

5. 双向数据绑定原理

Vue双向数据绑定原理

Vue 采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

1.实现一个监听器Observer,用来劫持并监听所有对象属性,数据发生变化时拿到最新值通知订阅者。

2.实现一个指令解析器Compile,对每个节点元素的相关指令进行扫描和解析,并根据模板指令替换数据,初始化页面视图以及绑定相应更新函数。

3.实现一个订阅者Watcher,作为Observer和Compile的桥梁,可以收到属性的变化通知并执行指令绑定的的回调函数,从而更新视图。

4.MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者
通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化更新视图;视图变化更新数据的双向绑定效果。

在这里插入图片描述

6. Object.defineProperty 缺点

在 Vue3.0 采用了 Proxy,抛弃了 Object.defineProperty

a. 通过下标方式修改数组数据或者给对象新增属性,Object.defineProperty 不能拦截到这些操作。对于数组而言,大部分操作都是拦截不到的
b. Object.defineProperty 只能劫持对象的属性, Proxy 可以劫持整个对象,并返回一个新的对象。
c. Proxy 不仅可以代理对象,还可以代理数组和动态增加的属性。

Proxy 可以完美的监听到任何方式的数据改变,唯一的缺点是兼容性的问题,因为 Proxy 是 ES6 的语法。

7. Computed 和 Watch 的区别

计算属性Computed含义:用来声明式的描述一个值依赖了其它的值,当它依赖的这个值发生改变时,就更新DOM。每个计算属性都包括getter和setter,读取时触发getter,修改时触发setter。

  • computed 计算属性 : 依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取computed 的值时才会重新计算
  • watch 侦听器 : 更多的是观察的作用,不支持缓存,在每次监听的值发生变化时候都会执行回调进行后续操作
  • 使用场景
    computed—当需要进行数值计算,并且依赖于其它数据时(购物车商品结算)
    watch—当需要在数据变化时执行异步或开销较大的操作时(搜索框)

8. Computed 和 Methods 的区别

可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果,两种方式是相同的。

区别

  • computed计算属性带有缓存功能,只有相关依赖发生改变时才会重新求值,method 调用总会执行该函数;computed比methods的性能要高
  • computed是属性调用,而methods是函数调用
  • computed可以具有getter和setter方法,可以赋值,而methods不行

在这里插入图片描述

9. Vue中常见修饰符

1. 事件修饰符
.stop 阻止点击事件冒泡,相当于原生 js 中的 event.stopPropagation() .prevent 防止执行预设的行为 ,相当于原 生 js 中 event.preventDefault()
.capture :与事件冒泡的方向相反,事件捕获由外到内;
.self :只会触发自己范围内的事件,不包含子元素;
.once :只会触发一次。

2、修饰符
.lazy 改变后触发,光标离开 input 输入框的时候值才会改变
.number 将输出字符串转为 number 类型
.trim 自动过滤用户输入的首尾空格

3、键盘修饰符
.enter 回车键 .tab 制表键 .esc 返回键 .space 空格 键

10. Vue中指令有哪些

v-text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if v-else v-else-if :条件渲染
v-show : 通过控制display样式来控制显示/隐藏
v-for : 遍历数组/对象
v-on : 绑定事件监听, 一般简写为@
v-bind : 动态绑定一个或多个属性
v-model : 双向数据绑定
ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象

v-if与v-for不能同时用,v-for优先级高一点,会循环之后再判断条件(重复判断),开销比较大。可以把 v-if 放在【父】标签或者【子】标签中

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

v-if 与 v-show 的作用效果是相同的,都能控制元素在页面是否显示

区别:

  • v-if是控制元素是否加载到页面上,动态的向DOM树内添加或者删除DOM元素(有性能开销)
  • v-show是通过设置DOM元素的 display:none控制元素的显示与隐藏 (初始创建时加载一次)

频繁切换使用v-show

12. data 为什么是一个函数而不是一个对象

  • 组件是可复用的vue实例,data数据都应该是相互独立,互不影响;
    多个组件复用时,每次调用data函数的时候都会return一个新的对象,它们的内存地址都是不一样的,这样就不会相互影响。
  • 如果是引用类型(对象),当多个组件共用一个data数据,一处数据改变,所有组件数据也会发生变化,所以要利用函数通过return返回对象的拷贝(返回一个新数据),这样就可以让每个实例都有自己的作用域,互不影响。

13. vue单页应用与多页应用的区别

  • SPA单页面应用(SinglePage Web Application)
    一个主页面+许多模块的组件;
    页面切换快,体验佳;不利于SEO;
    路由模式可以使用hash,也可以使用history;
    前期开发成本高,后期维护容易
  • MPA多页面应用 (MultiPage Application)
    许多完整的页面;
    页面切换慢,体验欠佳;适合对SEO要求高的应用;
    路由模式是普通链接跳转;
    前期开发成本低,后期维护麻烦;

14. SPA单页面的理解,优缺点

SPA( single-page application )单页面应用:仅在 Web 页面初始化时加载相应的 HTML、JS和 CSS。简单来说, SPA应用程序只有一个html文件,在vue中可以通过vue-router来局部切换组件,而非刷新整个页面,来实现无刷新切换页面的技术。

  • 优点:前后端分离,架构清晰; 用户体验好, 一个字 快, 内容改变不需要重新加载整个页面 ,所以相对服务器压力小
  • 缺点:不利于 SEO; 初次加载时耗长(浏览器一开始就要加载 html css js ,所有的页面内容都包含在主页面中)页面复杂度提高了;不能使用浏览器的前进后退功能

15. Vue和React的理解异同

相同
都有自己的构建工具;
都使用了(虚拟DOM)提高重绘性能;
都有props的概念,允许组件间的数据传递;
都鼓励组件化应用,提高复用性。

不同
数据流:Vue默认支持数据双向绑定,而React提倡单向数据流
模板渲染方式的不同;组件通信不同;监听数据变化的实现原理不同;

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值