vue面试题

Vue部分:

1.watch和computed什么情况或者什么场景下用?

共同点是:都是希望在依赖数据发生改变的时候,被依赖的数据根据预先定义好的函数,发生“自动”的变化。

computed: 是计算属性,依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值;

应用:

当我们需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed 的缓存特性,避免每次获取值时,都要重新计算;

computed 计算后返回新一个数据受多个数据影响(比如:计算总价格、过滤某些数据、购物车商品结算的时候)

computed是用来处理你使用watch和methods的时候无法处理(比如有缓存的时候监听不了数据变化),或者是处理起来并不太恰当的情况的,利用computed处理methods存在的重复计算情况。

watch: 更多的是「观察」的作用,类似于某些数据的监听回调 ,每当监听的数据变化时都会执行回调进行后续操作;

watch 监听某个数据的变化(监听完调用什么函数) 一个数据影响多个数据

(比如:浏览器自适应、监控路由对象、监控自身属性变化、搜索数据)

(可参考文章的例子:https://www.cnblogs.com/lxmyhappy/p/11597134.html

2.实现双向绑定的原理?(vue源码分析)

当data 有变化的时候它通过Object.defineProperty()方法中的set方法进行监控,并调用在此之前已经定义好data 和view的关系了的回调函数,来通知view进行数据的改变,而view 发生改变则是通过底层的input 事件来进行data的响应更改。

给data中的所有属性提供set方法, set方法监视get中属性的变化,一旦它变了页面就更新了

vue是通过数据劫持的方式来做数据绑定的,

其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的。

数据绑定:更data中的数据,更新界面

数据劫持:

初始化显示:页面(表达式/指令)能从data中读取数据显示(编译/解析)

更新显示:更新data中的属性数据==>页面更新

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

整理了一下,要实现mvvm的双向绑定,就必须要实现以下几点:
①实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者
②实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
③实现一个Watcher,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图
④mvvm入口函数,整合以上三者

(参考文章:https://github.com/DMQ/mvvm

https://segmentfault.com/a/1190000006599500

3.对于MVVM的理解

MVVM 是 Model-View-ViewModel 的缩写。
Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。
View 代表UI 组件,它负责将数据模型转化成UI 展现出来。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View。
在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。

4.Vue如何实现动态路由?路由的原理?

路由原理:vue-router通过hash与history 两种方式实现前端路由,更新视图但不重新请求页面是前端路由原理的核心之一。

总结路由的生命周期: 

- 会触发离开的钩子    beforeRouteLeave

- 如果进入到新的页面    beforeEach

- beforeEnter    进到路由的配置中

- beforeRouteEnter    组件进入时的钩子

- 解析完成    beforeResolve

- afterEach    当前进入完毕

- 当属性变化时 并没有重新加载组件 会触发beforeRouteUpdate方法

- 组件渲染完成后 会调用当前beforeRouteEnter回调方法

(动态路由参考文章

https://segmentfault.com/a/1190000015419713?utm_source=tag-newest

5.组件之间如何通信?

父—>子props方法接收父组件传来的值;

子—>父 $emit触发父组件中子组件自定义的事件;

(*自定一个事件名tanslate和一个参数this.msg *)

兄弟组件:bus 创建vue实例作为桥梁,使用该实例的on以及emit实现数据传递信息;/vuex

eventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适。

5.$nextTick( )的作用?

当你修改了data的值然后马上获取这个dom元素的值,是不能获取到更新后的值,
你需要使用$nextTick这个回调,让修改后的data值渲染更新到dom元素之后再获取,才能成功。(异步更新队列)

6.vuex是什么?怎么使用?哪种功能场景使用它?

只用来读取的状态集中放在store中;

改变状态的方式是提交mutations,这是个同步的事物; 异步逻辑应该封装在action中。
在main.js引入store,注入。新建了一个目录store,….. export 。
场景有:单页应用中,组件之间的状态、登录状态、加入购物车

 state
Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例,但单一状态树和模块化并不冲突。存放的数据状态,不可以直接修改里面的数据。一般用来来存储应用中需要共享的状态;

mutations只能是同步地更改状态;commit

action异步地更改状态,action并不直接改变state,而是通过mutation来改变的。dispath

getters类似vue的计算属性,主要用来过滤一些数据。

modules项目特别复杂的时候,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。

7.vue生命周期?beforeMount和mounted的用法?

Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。

beforeCreate(创建前) 在数据观测和初始化事件还未开始
created(创建后) 完成数据观测,属性和方法的运算,初始化事件,$el属性还没有显示出来
beforeMount(载入前)在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。[挂载到DOM树之前]
mounted(载入后)在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。[挂载到DOM树之后]

第一次页面加载会触发:beforeCreate, created, beforeMount, mounted 

--------------------------------------------------------------------------------------------
beforeUpdate(更新前) 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
updated(更新后) 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy(销毁前) 在实例销毁之前调用。实例仍然完全可用。
destroyed(销毁后) 在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

8.单页面和多页面的应用?

多页面应用

单页面应用

包含多个独立完成的HTML页面(缺点:请求次数多)

整个项目只有一个完整的HTML页面,其他的页面只不过是HTML片段(优:请求少,JS渲染)

页面跳转本质:

删除整个DOM树,重新加载另一个整个DOM树

页面跳转本质:

把当前DOM树中局部片段替换为另一个HTML片段

如果两个页面都需要一个相同的资源,每个页面都要重复请求

如果多个“片段页面”都要用到相同的资源,只需要下载一次即可

缺点:切换慢

缺点:首屏时间慢,SEO差

9.Vue修饰符有哪些?

①v-model的修饰符:

.lazy- 取代 input 监听 change 事件  光标离开input框才会更新数据

.number - 输入字符串转为有效的数字

.trim - 输入首尾空格过滤

②v-on(@)的修饰符:

.stop - 调用 event.stopPropagation()。阻止事件冒泡

.prevent - 调用 event.preventDefault()。阻止默认行为

比如:表单的提交、a标签的跳转就是默认事件

.capture - 事件的完整机制是捕获-目标-冒泡,事件触发是目标往外冒泡。

.self - 只有元素本身触发时才触发方法,就是只有点击元素本身才会触发。比如一个div里面有个按钮,div和按钮都有事件,我们点击按钮,div绑定的方法也会触发,如果div的click加上self,只有点击到div的时候才会触发,变相的算是阻止冒泡。

.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。(.keyup、.enter等)

.native - 监听组件根元素的原生事件。

.once - 只能用一次,无论点击几次,执行一次之后都不会再执行。

.left - (2.2.0) 只当点击鼠标左键时触发。

.right - (2.2.0) 只当点击鼠标右键时触发。

.middle - (2.2.0) 只当点击鼠标中键时触发。

.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

③v-bind(:)的修饰符:

.prop- 默认绑定到 DOM 节点的 attribute 上,

使用 .prop 修饰符后,会绑定到 property

注意事项:

使用 property 获取最新的值;

attribute 设置的自定义属性会在渲染后的 HTML 标签里显示,property 不会。

修饰符用途:

通过自定义属性存储变量,避免暴露数据
防止污染 HTML 结构

.sync (2.3.0+) 语法糖,子组件当中修改父组件的某个数据时可以用到。

:isShow.sync="isShow"其实是 @update:isShow="bol=>isShow=bol"语法糖。是其一种简写形式。(参考文章https://www.jianshu.com/p/d42c508ea9de

10.v-cloak的应用?

防止闪现,和 CSS 规则如 [v-cloak] { display: none } 一起用时

//css中[v-cloak]{  display: none;} 样式的属性选择器 去找有这样的一个属性名的选中器

//html中<div v-cloak>{{message }}</div>

//不会显示`{{message}}`没渲染的瞬间,直到编译结束渲染出结果才会显示。

显示{{message}}  模板在解析之前有模板属性,解析之后没有了

6 声望
0 粉丝
0 条评论
推荐阅读
vue-cli(vue脚手架)项目搭建
运行项目时报错: 'webpack' 不是内部或外部命令,也不是可运行的程序。报这个错是因为没有全局安装webpack,解决方法:1.确保nodeJS已安装。2.找到nodejs目录,我的目录是图片上这个,你的可能不一样,看下有没有以下...

花火516阅读 1.3k

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青55阅读 7.8k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.4k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan43阅读 2.9k评论 14

封面图
6 声望
0 粉丝
宣传栏