竹笋

首页 » 问答 » 问答 » 前端Vue面试题精选,速来
TUhjnbcbe - 2023/1/12 0:00:00

一、Vue常用指令

v-model多用于表单元素实现双向数据绑定(同angular中的ng-model)

v-bind动态绑定作用:及时对页面的数据进行更改

v-on:click给标签绑定函数,可以缩写为

,例如绑定一个点击函数函数必须写在methods里面

v-for格式:v-for=字段名in(of)数组json循环数组或json(同angular中的ng-repeat)

v-show显示内容(同angular中的ng-show)

v-hide隐藏内容(同angular中的ng-hide)

v-if显示与隐藏(dom元素的删除添加同angular中的ng-if默认值为false)

v-else-if必须和v-if连用

v-else必须和v-if连用不能单独使用否则报错模板编译错误

v-text解析文本

v-html解析html标签

v-bind:class三种绑定方法1、对象型{red:isred}2、三元型isred?red:blue3、数组型[{red:isred},{blue:isblue}]

v-once进入页面时只渲染一次不在进行渲染

v-cloak防止闪烁

v-pre把标签内部的元素原位输出

二、v-show指令和v-if指令的区别是什么?

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

三、Vuetemplate到render的过程

(1)调用parse方法将template转化为ast(抽象语法树,abstractsyntaxtree)

(2)对静态节点做优化。如果为静态节点,他们生成的DOM永远不会改变,这对运行时模板更新起到了极大的优化作用。

(3)生成渲染函数.渲染的返回值是VNode,VNode是Vue的虚拟DOM节点,里面有(标签名,子节点,文本等等)

四、Vue模板渲染的原理是什么?

vue中的模板template无法被浏览器解析并渲染,因为这不属于浏览器的标准,不是正确的HTML语法,所有需要将template转化成一个JavaScript函数,这样浏览器就可以执行这一个函数并渲染出对应的HTML元素,就可以让视图跑起来了,这一个转化的过程,就成为模板编译。

模板编译又分三个阶段,解析parse,优化optimize,生成generate,最终生成可执行函数render。

parse阶Vue段:使用大量的正则表达式对template字符串进行解析,将标签、指令、属性等转化为抽象语法树AST。

optimize阶段:遍历AST,找到其中的一些静态节点并进行标记,方便在页面重渲染的时候进行diff比较时,直接跳过这一些静态节点,优化runtime的性能。

generate阶段:将最终的AST转化为render函数字符串。

五、Vue事件绑定原理是什么?

每一个Vue实例都是一个EventBus,当子组件被创建的时候,父组件将事件传递给子组件,子组件初始化的时候是有$on方法将事件注册到内部,在需要的时候使用$emit触发函数,而对于原生native事件,使用addEventListener绑定到真实的DOM元素上。

六、Vue为何需要VirtualDOM(虚拟DOM)?

(1)具备跨平台的优势

(2)操作DOM慢,js运行效率高。我们可以将DOM对比操作放在JS层,提高效率

(3)提升渲染性能

七、Vue中的axios是什么?

易用、简洁且高效的

1
查看完整版本: 前端Vue面试题精选,速来