vue面试笔记(1)

对vue的理解

是一个渐进式(progress web app)js(根据业务需要而选择需要什么,最基本的UI操作,到vue-router,vuex状态管理)框架,可以把一个网页分割成许多的组件,当其他网页有类似的功能的时候,直接让封装的组件进行复用,
是构建用户界面的声明式框架,不关心具体是如何实现的。

mvvm的理解

是model-view-viewModel的缩写,model为数据模型,可以在model中定义数据修改和操作的业务逻辑。view代表UI组件,负责将数据模型转化为UI展现出来,
viewModel是一个同步view和Model的对象。
view和model通过viewModel之间相连。model和viewmodel之间的交互是双向的。因此view和model的数据变化会同步
viewModel通过双向的数据绑定把view和model层连接了起来。view和model之间的同步工作完全是自动的,无需人为干涉。开发者只需要关注业务逻辑。无需操作DOM,不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。

mvvm和mvc区别

mvc中的controller转变成了mvvm中的viewModel,mvvm主要解决了mvc中大量的dom操作使页面渲染性能降低的原因,加载速度变慢,影响用户体验。和当 Model 频繁发生变化,开发者需要主动更新到 View 。

v-model(双向绑定的原理)

vue的双向数据绑定是通过数据劫持结合发布者订阅者模式实现的,数据劫持通过object.defineProperty()来劫持对象数据的setter对象和getter操作。
在数据变动时做你向做的事情。
原理:通过observer来监听自己model的变化,通过compile来解析编译模板的指令,利用watcher搭建起observer和compile之间的桥梁,
达到数据变化 -> 视图更新 ,
在初始化vue的时候,遍历data的对象,给每一个键值对利用object.defineProperty对data中的所有数据加上get和set方法,利用事件监听dom的机制,让视图去改变数据。
(angular js中实现的机制是脏检查),react中是拉的机制**,
收集依赖和触发依赖

1
2
3
<template>
<h1{{name}}</h1>
</template>

把用到数据name的地方都收集起来,然后等属性发生变化的时候,把之前收集好的依赖循环触发一遍即可。
在getter中收集依赖,在setter中触发依赖

依赖放的地方

将依赖收集来的地方放在dep类的数组中,帮我们来管理依赖,使用这个类,我们可以收集依赖,删除依赖或者向依赖发送通知。

依赖是谁

依赖的地方可能有很多,一个地方是模板,一个地方是watch,需要抽离出一个能几种处理这些情况的类。
然后,在收集阶段只收集这个封装好的类的实例即可。通知也通知他一个。随后它在负责通知其他地方。就叫watcher.
将watcher实例保存到dep中。
将object中所有属性转换为可侦测的。通过observer类将object所有属性转化为getter/setter
有以下几步:
第一步:需要 observe 的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter 和 getter 这样的话,给这个对象的某个值赋值,就会触发 setter,那么就能监听到了数据变化

第二步:compile 解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图

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

  • 在自身实例化时往属性订阅器(dep)里面添加自己
  • 自身必须有一个 update()方法
  • 待属性变动 dep.notice()通知时,能调用自身的 update() 方法,并触发 Compile 中绑定的回调,则功成身退。
    第四步:MVVM 作为数据绑定的入口,整合 Observer、Compile 和 Watcher 三者,通过 Observer 来监听自己的 model 数据变化,通过 Compile 来解析编译模板指令,最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据 model 变更的双向绑定效果。

vue和react angular的区别

相同点:
react和vue都是用虚拟DOM Virtual DOM
中心思想相同:一切都是组件,组件实例之间可以嵌套
都有着合理的钩子函数
都不内置ajax、route等核心包,以插件的形式加载
都有配套的路由和负责处理全局状态管理的库;
不同点:
react采用jsx渲染页面,vue使用简单的模板
vue是双向数据流,react是单向数据流(需要了解)
vuejs在模板中提供了指令,过滤器,可以非常方便,快速操作DOM。
vue比react的运行速度更快。

react和angular的区别

相同点:都是单向数据流
不同点:react中没有指令,angular提供了丰富的指令。