专栏首页较真的前端Vue相关的前端面试题,每道题都很经典~

Vue相关的前端面试题,每道题都很经典~

今天总结了一些Vue相关的面试题,希望能帮助到大家。

问题目录

①:说说Vue和Angular、ReactJS的相同点和不同点

②:简单描述一下Vue中的MVVM模型

③:v-if和v-show指令有什么区别?

④:如何阻止Vue中的绑定事件不发生冒泡

⑤:父、子组件间是如何通信的?

⑥:非父子层级的组件如何实现通信?

⑦:什么是动态组件?他的作用是什么?

⑧:为什么组件中的data属性的值必须是一个函数?

答案与详解

Q

说说Vue和Angular、ReactJS的相同点和不同点

与React的相同:

●都使用了Virtual DOM

●提供了响应式和组件化的视图组件

●将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。

与React的区别:

●组件的响应式渲染

React的组件的数据状态发生变化时,它会以该组件为根,重新渲染整个组件子树;而Vue不只去渲染需要渲染的组件。

●HTML+CSS的编写

React使用的JSX语法,将HTML、CSS和JS混写;而Vue使用的是templates模板方式,完全融合与经典的Web技术。

与Angular的相同:

Vue早起的灵感是来源于Angular,所以很多语法是类似的,如v-if和ng-if。

与Angular的区别:

●与Angular 1对比,Vue的性能更加优越,Angular性能会随着watcher的增加而变慢,而且Angular中一些watcher会出触发另一个更新,使得“脏检查循环”可能会运行多次。

●Angular事实上必须用TypeScript来开发,而且Angular对于TS的支持非常全面,而Vue暂时对于TS的支持还在改进阶段。

●Vue的体积更小,一个包含了 vuex + vue-router 的 Vue 项目 (30kb gzipped) 相比使用了这些优化的 angular-cli 生成的默认项目尺寸 (~130kb) 还是要小的多。

Q

简单描述一下Vue中的MVVM模型

Vue是以数据为驱动的,Vue自身将DOM和数据进行绑定,一旦创建绑定,DOM和数据将保持同步,每当数据发生变化,DOM会跟着变化。

ViewModel是Vue的核心,它是Vue的一个实例。Vue实例是作用在某个HTML元素上的,这个HTML元素可以是body,也可以是某个id所指代的元素。 DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化,当发生变化,Model层的数据随之变化;Data Bindings监听Model层的数据,当数据发生变化,View层的DOM元素随之变化。

Q

v-if和v-show指令有什么区别?

v-show对应的值无论是true还是false,对应Html元素都会存在于浏览器的文档中;而v-if如果是false的话,直接不在文档中了。

Q

如何阻止Vue中的绑定事件不发生冒泡

可以使用“事件修饰符”来处理事件冒泡,如:v-on:click.stop阻止事件冒泡

或v-on:submit.prevent阻止默认事件。

Q

父、子组件间是如何通信的?

在Vue中,每个组件实例的作用域是孤立的。这也意味着不能(也不应该)在子组件的模板内直接饮用父组件的数据。父组件通过Props向子组件传递数据,而子组件通过Events向父组件传递数据。

来自vue官网

Q

非父子层级的组件如何实现通信?

简单的应用场景下,可以使用一个空的Vue实例作为中央事件总线。

在复杂的情况下,可以考虑使用Vue 官方提供的状态管理模式——Vuex来进行管理。

Q

什么是动态组件?他的作用是什么?

通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,我们让多个组件可以使用同一个挂载点,并可以动态地切换。

除此之外,Vue还提供了keep-alve指令。keep-alive指令允许把切换出去的组件保留在内存中,并保留它的状态或避免重新渲染。

Q

为什么组件中的data属性的值必须是一个函数?

因为在一个组件被多次引用的情况下,如果data的值是一个Object的话,那么由于Object是一个引用类型,所以即使是该组件被多次引用,而其实操作的是同一个对象,最终导致了引用该组件的所有位置都同步的显示了。

本文分享自微信公众号 - 较真的前端(gh_7af41a2be77e),作者:英俊潇洒你冲哥

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-08-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 尤雨溪分享Vue3最新进展▶️

    第二届VueConf 于2018年11月24在杭州举行。Vue的作者——尤雨溪远程参与并做了大会的第一个演讲。以下内容节选至尤雨溪的演讲视频。

    用户1687375
  • Vue 2.6来了

    本文摘自知乎——《Vue 2.6 发布了》,大家可以通过文章底部的阅读原来来访问原文地址

    用户1687375
  • [译]图解React

    React、ReactJS、React.js、React Native… 这些有些相似的名词你最近听过多少遍了?对于它们究竟是什么你是否感到困惑?

    用户1687375
  • 8 道高频出现的 Vue 面试题及答案

    MVP 模式将 Controller 改名为 Presenter,同时改变了通信方向。

    夜尽天明
  • 还学的动吗? 盘点下Vue.js 3.0.0 那些让人激动的功能

    路漫漫其修远兮,吾将上下而求索。——献给所有为 Vue的发展而默默付出的开发者们。

    葡萄城控件
  • TypeScript 在 Vue 的实践

    在 vue-cli 3.0 的脚手架出来以后,官方我们提供了一套 Vue 的 TypeScript 模板,解决了许多模块以及类型问题,官方的东西真香,因此可以使...

    MrTreasure
  • 案例:OGG目标端进程ABENDED处理

    源端环境:RHEL 6.5 + Oracle 11.2.0.4 RAC + OGG 19.1.0.0.4 目标端环境:RHEL 7.6 + Oracle 19....

    Alfred Zhao
  • 程序员的圣诞节--送她一颗圣诞树(附源代码)

    昨天是平安夜,今天是12.25号,传说中的圣诞节,好日子真多,相信大家在公司里已经感受到了节日的气氛,非常热闹。但是对于我们码农(程序员、程序猿、程序媛)来说,...

    飞雪无情
  • 赵长鹏,新时代的领跑者!创业者可以站起来了!

    5月7日赵长鹏在推特上表示,“可能会很快要求所有申请在币安上线的项目披露其是否与红杉有直接或间接关系。

    区块链领域
  • 卷积神经网络工作原理直观解释

    其实我们在做线性回归也好,分类(逻辑斯蒂回归)也好,本质上来讲,就是把数据进行映射,要么映射到一个多个离散的标签上,或者是连续的空间里面,一般简单的数据而言,我...

    智能算法

扫码关注云+社区

领取腾讯云代金券