关于前端Vue框架的知识点

阳光总在风雨后

最近有时间,整理一下Vue的知识点,很多都是面试常见的


1、Vue的生命周期

如果你能理解了这张图,也就对Vue的生命周期有了一个大致的了解。

Vue

vue生命周期总共分为8个阶段 创建前/后,载入前/后,更新前/后,销毁前/后。

  1. 创建/前后:在beforeCreated阶段,vue实例的挂载元素el还没有。在beforeCreated阶段可以添加loading事件,在created阶段发起后端请求,拿回数据
  2. 载入前/后:在beforeMount阶段,vue实例的$el和data都初始化,但是挂载之前为虚拟的dom节点,data.message还未替换,页面无重新渲染。在mounted阶段,vue实例挂载完成,data.message成功渲染。
  3. 更新前/后:当data变化时,会触发beforeUpdate和updated方法。
  4. 销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在。
第一次页面加载会触发哪几个钩子?
答:会触发 下面这几个beforeCreate, created, beforeMount, mounted 。
DOM 渲染在 哪个周期中就已经完成?
答:DOM 渲染在 mounted 中就已经完成了。

2、对MVVM开发模式的理解?

MVVM分为Model、View、ViewModel三者。

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

Model 和 View 并无直接关联,而是通过 ViewModel 来进行联系的,Model 和 ViewModel 之间有着双向数据绑定的联系。
这种模式实现了 Model 和 View 的数据自动同步,因此开发者只需要专注对数据的维护操作即可,而不需要自己操作 dom。


3、VUE数据双向绑定原理

答:vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty()来劫持各个属性的
setter,getter,在数据变动时发布消息 给订阅者,触发相应的监听回调。
具体步骤:

  • 第一步:需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上setter和getter

这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化

  • 第二步:compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定

更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图

  • 第三步:Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:

    1、在自身实例化时往属性订阅器(dep)里面添加自己
    2、自身必须有一个update()方法
    3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。

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

详细请看:Vue 双向数据绑定原理详细分析


4、v-if 和 v-show 有什么区别?

v-show 仅仅控制元素的显示方式,将 display 属性在 block 和 none 来回切换;而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时,使用v-show会更加节省性能上的开销;当只需要一次显示或隐藏时,使用v-if更加合理。

5、父子组件之间的传值和通信?

父组件向子组件传值:
1)子组件在props中创建一个属性,用来接收父组件传过来的值;
2)在父组件中注册子组件;
3)在子组件标签中添加子组件props中创建的属性;
4)把需要传给子组件的值赋给该属性

子组件向父组件传值:
1)子组件中需要以某种方式(如点击事件)的方法来触发一个自定义的事件;
2)将需要传的值作为$emit的第二个参数,该值将作为实参传给响应事件的方法;
3)在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。

6、Vue的路由实现:hash模式 和 history模式

hash模式:在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取;
特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。
hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.xxx.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。

history模式:history采用HTML5的新特性;且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。
history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理,将返回 404 错误。Vue-Router 官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。”

7、vue路由的钩子函数

首页可以控制导航跳转,beforeEach,afterEach等,一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。
beforeEach主要有3个参数to,from,next:
to:route即将进入的目标路由对象,
from:route当前导航正要离开的路由
next:function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

8、vue等单页面应用及其优缺点

优点:Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
缺点:不支持低版本的浏览器,最低只支持到IE9;不利于SEO的优化(如果要支持SEO,建议通过服务端来进行渲染组件);第一次加载首页耗时相对长一些;不可以使用浏览器的导航按钮需要自行实现前进、后退。


9、vue中 key 值的作用?

key的作用主要是为了高效的更新虚拟DOM。
阅读 4.1k

专注web开发、追求新技术

210 声望
21 粉丝
0 条评论
你知道吗?

专注web开发、追求新技术

210 声望
21 粉丝
宣传栏