vue面试必会

一、对于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,不需要关注数据状态的同步问题,复杂的数据状态维护完全由ViewModel来统一管理;

二、 Vue的生命周期

1.beforeCreate(创建前) :在数据观测和初始化事件还未开始;

2.created(创建后):完成数据观测,属性和方法的运算,初始化事件,$el属性还没有显示出来;

3.beforeMount(挂载前):在挂载前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

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

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

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

7.beforeDestroy(销毁前):在实例销毁之前调用。实例完全可以用。

8.destroyed(销毁后):在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

1.什么是Vue生命周期?

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

2.vue生命周期的作用是什么?

答:它的生命周期中有多个钩子,让我们在控制整个Vue实例的过程中更容易形成好的逻辑。

3.Vue生命周期总共分为几个阶段?

答:他可以总共分为8个阶段:创造前后、载入前后、更新前后、销毁前后。

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

答: beforeCreate,created,beforeMount,Mounted

5.DOM渲染在哪个周期中就已经完成?

答:在Mounted中就已经完成了。

三、 Vue实现双向数据绑定的原理:Object.defineProperty()

vue实现数据双向绑定主要是: 采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的getter,setter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通js对象传给Vue实例来作为它的data选项时,Vue将遍历它的属性,用Object.defineProperty将它们转化为getter/setter。用户看不到getter/setter,但是在内部它们让Vue追踪依赖,在属性被访问和修改时通知变化。

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

js实现简单的双向绑定:
    <body>
    <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
</div>
</body>
<script type="text/javascript">
    var obj = {}
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    })
</script>

四、 Vue组件间的参数传递

1. 父组件与子组件传值
父组件给子组件传值:子组件通过props方法接收并规定数据;
子组件传给父组件:$emit方法传递参数;

2. 非父子组件之间的数据传递,兄弟组件传值
eventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适。(虽然也有不少人推荐直接使用VUEX,具体看需求)

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

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

2.history模式:history采用H5新特性;且提供了两个新方法: pushState() , replaceState() 可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更

VUE路由的钩子函数

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

Vuex是什么?怎么使用?那种功能场景使用它?

vuex:只用来读取的状态放在store中;改变状态的方式是提交mutaions,这是个同步的食物; 异步逻辑应该封装在action中。
使用:在main.js引入store,注入。
state:存放的数据状态,不可以直接修改里面的数据。
mutations:定义的方法动态修改vuex的store中的状态或数据。
getters:类似vue中的计算属性,主要用来过滤一些数据
action: 异步处理数据的方法。 view层通过store.dispath来分发action。
modules:项目特别复杂的时候,可以让每一个模块拥有自己的state、mutation....,使得结构非常清晰,方便管理。
场景有:单页应用中,组件之间的状态、音乐播放、登录状态、加入购物车

对keep-alive的了解?

keep-alive是vue内置的一个组件,可以是被包含的组件保留状态,或避免重新渲染。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容