vue dispatch用法_Vue面试题总结

1cac0da4c2fa6f7004f36cac57934659.png

Vue作为前端目前最受欢迎的框架,成为了众多公司和程序员的技术首选。我最近可能也要准备面试了,所以找了一些资料整合一下

谈一下你对MVVM原理的理解

M - Model,Model 代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑

V - View,View 代表 UI 组件,它负责将数据模型转化为 UI 展现出来

VM - ViewModel,ViewModel 监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步 View 和 Model 的对象,连接 Model 和 View、

【重点】:一定要理解VueMVVM原理,面试必问!

请说一下响应式数据的原理

采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的settergetter

默认Vue在初始化数据时,会给data中的属性使用Object.defineProperty重新定义所有属性,当页面到对应属性时,会进行依赖收集(收集当前组件中的watcher)如果属性发生变化会通知相关依赖进行更新操作

为什么Vue采用异步渲染

因为如果不采用异步更新,那么每次更新数据都会对当前租金按进行重新渲染,所以为了性能考虑,Vue会在本轮数据更新后,再去异步更新数据

Vue优点

  • 轻量级框架
    只关注视图层,是一个构建数据的视图集合,大小只有几十kbVue.js通过简洁的API提供高效的数据绑定和灵活的组件系统

  • 简单易学
    国人开发,中文文档,不存在语言障碍,易于理解和学习

  • 双向数据绑定
    通过MVVM思想实现数据的双向绑定,让开发者不用再操作dom对象,有更多的时间去思考业务逻辑

  • 组件化Vue.js通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中,我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑),然后整个应用就算做完了

  • 虚拟DOM
    把最终的DOM操作计算出来并优化,由于这个DOM操作属于预处理操作,并没有真实的操作DOM,所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交,将DOM操作变化反映到DOM树上

  • 视图,数据,结构分离
    使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作

  • 运行速度更快
    像比较与react而言,同样都是操作虚拟dom,就性能而言,vue存在很大的优势

Proxy与Object.defineProperty()的对比

Proxy的优点:

  • 可以直接监听对象而非属性,并返回一个新对象

  • 可以直接监听数值的变化

  • 可以劫持整个对象,并返回一个新对象

Proxy的缺点:

  • Proxyes6提供的新特性,兼容性不好,所以导致Vue3一致没有正式发布让开发者使用

Object.defineProperty的优点:

  • 兼容性好,支持IE9

  • IE9以下的版本不兼容

Object.defineProperty的缺点:

  • 无法监控到数组下标的变化,导致直接通过数组的下标给数组设置值,不能实时响应

  • 只能劫持对象的属性,我们需要对每个对象的每个属性进行遍历

如何比较React和Vue

监听数据变化的实现原理不同

  • Vue通过getter/setter以及一些函数,能精确知道数据变化

  • React默认是通过比较引用的方式(diff)进行的,React不精确监听数据变化

数据流不同:

  • Vue2.0可以通过props实现双向绑定,用vuex单向数据流的状态管理框架

  • React不支持双向绑定,提倡单项数据流,Redux单向数据流的状态管理框架

组件通信的区别:

  • Vue三种组件通信方法:父组件通过props向子组件传递数据或回调子组件通过事件event向父组件发送数据或回调通过provide/inject实现父组件向子组件传入数据,可跨层级

  • React三种组件通信方法:父组件通过props向子组件传递数据React不支持子组件像父组件发送数据,而使用的是回调函数通过 context实现父组件向子组件传入数据, 可跨层级

模板渲染方式不同:

  • 表面上来看:React通过JSX渲染模板Vue通过HTML进行渲染

  • 深层上来看:React是通过原生JS实现模板中常见语法,如:插件,条件,循环Vue是与组件JS分离的单独模板,通过指令实现,如:v-if

模板中使用的数据:

  • React里模板中使用的数据可以直接import的组件在render中调用

  • Vue里模板中使用的数据必须要在this上进行中转,还要import一个组件,还要在components中声明

渲染过程不同:

  • Vue不需要渲染整个组件树

  • React状态改变时,全部子组件重新渲染

框架本质不同:

  • Vue本质是MVVM框架,由MVC发展而来

  • React是前端组件化框架,由后端组件化发展而来

Vuex和Redux的区别:

  • Vuex可以使用dispatchcommit提交更新

  • Redux只能用dispatch提交更新

组合不同功能方式不同:

  • Vue组合不同功能方式是通过mixin,可以帮我定义的模板进行编译、声明的props接收到数据….

  • React组合不同功能方式是通过HoC(高阶组件),本质是高阶函数

Vue中相同逻辑如何抽离

Vue.mixin用法给组件每个生命周期,函数等都混入一些公共逻辑

nextTick实现原理

nextTick方法主要是使用了宏任务和微任务,定义一个异步方法,多次调用nextTick会将方法存在队列中,通过这个异步方法清空当前队列。所以这个nextTick方法就是异步方法

diff算法的时间复杂度

两个数的完全的diff算法是一个时间复杂度为o(n3), Vue进行了优化O(n3)复杂度的问题转换成O(n)复杂度的问题(只比较同级不考虑跨级问题)在前端当中,你很少会跨级层级地移动Dom元素,所以Virtual Dom只会对同一个层级地元素进行对比

简述Vue中diff算法原理

  • 先同级比较,在比较子节点

  • 先判断一方有儿子一方没儿子的情况

  • 比较都有儿子的情况

  • 递归比较子节点

Vue中v-if和v-show的区别

v-showcss切换,v-if是完整的销毁和重新创建

使用 频繁切换时用v-show,运行时较少改变时用v-if

v-if=‘false’ v-if是条件渲染,当false的时候不会渲染

Vue每个生命周期什么时候被调用

  • beforeCreate在实例初始化之后,数据观测(data observer)之前被调用

  • created实例已经创建完成之后被调用,在这一步,完成已完成以下的配置:数据观测(data observer),属性和方法的运算,watch/event事件回调,这里没有$el

  • beforeMount在挂载开始之前被调用:相关的render函数首次被调用

  • mounted el被创建的vm.$el替换,并挂载到实例上去之后调用该钩子

  • beforeUpdate数据更新时调用,发生虚拟DOM重新渲染和补丁之前

  • updated由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后调用该钩子

  • beforeDestory实例销毁之前调用,在这一步,实例仍然完全可用

  • destroyedVue实例销毁后调用,调用后,Vu实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁,该钩子在服务器端渲染期间不被调用

因为文章篇幅有限,更多后续内容,尽快更新!

喜欢的朋友可以转发一下,谢谢!

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页