面试官常问的 web前端问题 31-40

31.使用 Vue 的好处
32.MVVM 定义
33.Vue 的生命周期（重点）
34.Vue 的响应式原理
35.第一次页面加载会触发哪几个钩子？
36.为什么vue 中 data 必须是一个函数？
37.vue 中做数据渲染的时候如何保证将数据原样输出？
38.active-class 是哪个组件的属性？
39.vue-router 有哪几种导航钩子？
40. $route 和 $router 的区别

31.使用 Vue 的好处

vue 两大特点：响应式编程、组件化；
vue 的优势：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟 DOM、运行速度快

32.MVVM 定义

MVVM 是 Model-View-ViewModel 的简写，模型-视图-视图模型。
【模型】指的是后端传递的数据（数据：json）。
【视图】指的是所看到的页面。
【视图模型】mvvm 模式的核心，它是连接 view 和 model 的桥梁。
有两个方向：
将【模型】转化成【视图】：即将后端传递的数据转化成所看到的页面（将后端Ajax数据渲染到前端视图）。实现的方式是：数据绑定。
将【视图】转化成【模型】：即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。

这两个方向都实现的，我们称之为数据的双向绑定。

总结：在 MVVM 的框架下视图和模型是不能直接通信的。
它们通过 ViewModel 来通信，ViewModel 通常要实现一个 observer 观察者，当数据发生变化，ViewModel 能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel 也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且 MVVM 中的 View 和 ViewModel 可以互相通信

33.Vue 的生命周期（重点）

beforeCreate（创建前）在数据观测和初始化事件还未开始；

created（创建后）完成数据观测，属性和方法的运算，初始化事件，$el 属性还没有显示出来；

beforeMount（载入前）在挂载开始之前被调用，相关的 render 函数首次被调用。实例已完成以下的配置：编译模板，把 data 里面的数据和模板生成 html。注意此时还没有挂载 html 到页面上。

mounted（载入后）在 el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的 html 内容替换 el 属性指向的 DOM 对象。完成模板中的 html 渲染到 html 页面中。此过程中进行 ajax 交互。

beforeUpdate（更新前）在数据更新之前调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

updated（更新后）：在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。调用时，组件 DOM 已经更新，所以可以执行依赖于 DOM 的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

beforeDestroy（销毁前）在实例销毁之前调用。实例仍然完全可用。

destroyed（销毁后）在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

34.Vue 的响应式原理

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

35.第一次页面加载会触发哪几个钩子？

触发这几个 beforeCreate、created、beforeMount、mounted ，并在 mounted 的时候 DOM 渲染完成

36.为什么vue 中 data 必须是一个函数？

对象为引用类型，当重用组件时，由于数据对象都指向同一个 data 对象，当在一个组件中修改 data 时，其他重用的组件中的 data 会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象（Object 的实例），引用地址不同，则不会出现这个问题。

37.vue 中做数据渲染的时候如何保证将数据原样输出？

v-text：将数据输出到元素内部，如果输出的数据有 HTML代码，会作为普通文本输出；
v-html：将数据输出到元素内部，如果输出的数据有 HTML 代码，会被渲染
{{}}：插值表达式，可以直接获取 Vue 实例中定义的数据或函数，使用插值表达式的时候，值可能闪烁；而使用 v-html、v-text 不会闪烁，有值就显示，没值就隐藏

38.active-class 是哪个组件的属性？

vue-router 模块的 router-link 组件。

39.vue-router 有哪几种导航钩子？

三种;
全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截;
组件内的钩子；
单独路由独享组件；

40. $route 和 $router 的区别

$route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数；
$router 是“路由实例” 对象包括了路由的跳转方法，钩子函数等

面试官常问的 web前端问题（四）相关推荐

面试官常问的 web前端问题（二）
面试官常问的 web前端问题 11-20 11.什么是响应式设计? 12.为什么我们要弃用 table 标签 13.iframe 有哪些缺点 14.meta viewport 是做什么用的,怎么写? ...
面试官常问的web前端问题
1. 标签上 alt与 title属性的区别是什么? alt :搜索引擎识别,在图像无法显示时的替代文本: title :元素注释信息,主要给用户解读.当鼠标放到文字或是图片上时有 title 文字显 ...
平面设计面试官常问的问题有哪些？
平面设计面试官常问的问题有哪些?一般情况下都会有一个开篇的自我介绍,这里建议就用平常聊天说话的语气语速来介绍就可以,介绍自己扬长避短,多讲自己的前工作项目经验,在校获奖也可以讲.与工作岗位不强相关 ...
爆赞！Android岗大厂面试官常问的那些问题，论程序员成长的正确姿势
开头昨天去面了一家公司,价值观有受到冲击. 面试官技术方面没的说,他可能是个完美主义的人,无论什么事情到了他那里好像都有解决的方案,我被说的无所适从,感觉他很厉害. 但我不能认可的是,面试官觉得加班 ...
前端面试官常问javaScript编程题，隔壁王大爷看了都会了
目录 1.数组排序. 2.数组元素的去重: 3.用递归的方法求数组的求和: 4.防抖节流的思路. 5.深拷贝.浅拷贝: 6.做一个10秒的倒计时: 7.setTimeout()和setInterval ...
面试官常问的！从输入URL到页面展示完成浏览器做了些什么？
为什么输入URL就可以显示想要的页面?浏览器偷偷做了些什么?前端可以针对这些做哪些优化? 最近,在准备面试,这个问题我是被面试官问怕了,浏览器到底做了什么?你去问浏览器呗(尴尬).想一下还是系统学习总 ...
面试官常问的问题及回答
1. 我们为什么要雇请你呢? 有的面试只有这么一个问题.话虽简单,可是难度颇高.主要是测试你的沉静与自信.给一个简短.有礼貌的回答:"我能做好我要做得事情,我相信自己,我想得到这份工作&qu ...
那些年Android面试官常问的知识点，分享一点面试小经验
开头年前面试了一些公司,目前已经拿到了阿里跟头条的 offer.去年我也出去找工作了,面试五家拿到了四家公司的 offer.所以在面试方面我应该可以提供一些愚见吧.本篇会讲解一些常见题目以及一些答题 ...
【拥抱大厂系列】几个面试官常问的垃圾回收器，下次面试就拿这篇文章怼回去！
点个赞,看一看,好习惯!本文 GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了3个月总结的一线大厂Java面试总结,本人已拿腾 ...

面试官常问的 web前端问题（四）

面试官常问的 web前端问题 31-40

31.使用 Vue 的好处

32.MVVM 定义

33.Vue 的生命周期（重点）

34.Vue 的响应式原理

35.第一次页面加载会触发哪几个钩子？

36.为什么vue 中 data 必须是一个函数？

37.vue 中做数据渲染的时候如何保证将数据原样输出？

38.active-class 是哪个组件的属性？

39.vue-router 有哪几种导航钩子？

40. $route 和 $router 的区别

面试官常问的 web前端问题（四）相关推荐

最新文章

热门文章

面试官常问的 web前端 问题（四）

面试官常问的 web前端 问题 31-40

31.使用 Vue 的好处

32.MVVM 定义

33.Vue 的生命周期（重点）

34.Vue 的响应式原理

35.第一次页面加载会触发哪几个钩子？

36.为什么vue 中 data 必须是一个函数？

37.vue 中做数据渲染的时候如何保证将数据原样输出？

38.active-class 是哪个组件的属性？

39.vue-router 有哪几种导航钩子？

40. $route 和 $router 的区别

面试官常问的 web前端 问题（四）相关推荐

最新文章

热门文章

面试官常问的 web前端问题（四）

面试官常问的 web前端问题 31-40

面试官常问的 web前端问题（四）相关推荐