Vue常见面试题(附加答案)

Vue最低支持IE几的版本?

不支持IE8及以下。

哪些操作方式可以做到响应式?

常用的数组函数,如unshift,shift,pop,push,sort,reverse,splice等这些修改data数据后,数据会直接同步。但是通过索引值修改的时候,他们并不会同步,比如使用arr[0] = ‘new_data’ ;
如果要想使用修改索引值的方式,并且同步到页面,可以使用Vue.set(Vue data 索引key值,改成后的参数);Vue.set不适用于this.msg不是对象类型的。

常见的事件修饰符

.stop阻止事件冒泡,需要添加到自己的身上,而不是要阻止的冒泡元素的身上。

.prevent 阻止默认事件,比如阻止a标签跳转。

.capture 事件捕获机制,此属性放到那个元素上,那个元素先执行,若有一个冒泡事件,默认是由内向外执行,在外部加上此属性,就会先触发某事件,若所有冒泡的元素都加,则逆反执行冒泡的顺序。

.self默认只有自己会执行命令,加载父元素上间接阻止冒泡,不推荐阻止冒泡使用,因为这个只能阻止当前加.self的html元素的冒泡事件,父级元素还会冒泡,意义就是只有点击自己的时候才会执行。

.once 限制事件只能执行一次。可多个一起使用,.prevent.once一起使用在a标签身上的话,首次可以阻止跳转,但是第二次就会跳转。

v-for唯一id的作用

如果是通过下标进行绑定的,那么会造成,对象或者数组中间或者开始位置做了删除或者追加,则下标与实际元素就对不上,造成操作对象的错误。

vue生命周期钩子函数发生了什么,此时方便做什么?

beforeCreate:执行在data和methods之前。一般不会做什么,除非初始化一些数据。

created:要想操作data和methods中的数据,最早要在这里执行,一般会做异步请求。

beforeMount: 内存中生成一个编译好的字符串模板,把这个字符串渲染为内存DOM,但没有挂载到页面。一般不会做什么。

monted:内存中的数据已经成功替换到页面中,要想操作DOM节点,最早要在这里进行。

beforeUpdate:data中的数据已经更改,但是没有同步到页面。

updated:data中的数据已经重新渲染成新的DOM,并应用到页面。

beforeDestroy:对象资源准备销毁,还没有被销毁。

destroyd:资源已经被销毁,Vue大部分功能无法使用。

为什么子组件data要是一个函数?

如果返回不是一个函数,也就是不会重新计算,那么数据就会存在着共享,改一个组件的数据,其它使用这个组件的数据也会跟着发生变化,往往实际开发不希望这样,要求数据是可控的,而不是被动发生变化。函数意味着能够重新计算,组件在底层会使用在不同的内存数据。

runtime-complier与runtime-only区别

vue的执行过程:
把template解析成抽象语法树abstract syntax tree
抽象语法树编译成render函数
render函数创建虚拟dom树
虚拟DOM树在变成真实DOM
template-解析>ast-编译>render->vdom->dom
适用于.html的vue开发。

runtime-only 可以直接把render 变成virtual dom。
runtime-only更轻性能更高。
前面的template-ast的过程已经通过vue-template-complier完成了。
render->vdom->dom
适用于.vue的vue开发。

路由懒加载的写法和作用

作用:
因为项目会越来越大,导致单个js的文件会越来越大,这会导致首次打开页面的时候性能降低。
为了解决,就产生了懒加载,就是用到的时候才进行加载。
不同的路由对应的组件打包到不同的js文件里面。
依照现在的版本看,路由的数量与js文件的数量是一一对应的。

实现:

import Home from '../views/Home.vue';
component: Home
改为:
component: () => import( '../views/About.vue');

methods computed watch区别

computed必定有返回值,watch没有。

methods适合大量业务逻辑处理。
computed适合轻量级处理,例如用于通过计算得出插值表达式的值,若果结果不发生改变,结果会被缓存,侧重属性。

watch适合做监听,从而进行某些业务逻辑的操作。

三者用法看场景,并无严格的场景约束。

el与template标签区别

el:会将实例挂载到对应的标签上。
template标签。template对应的内容,会替换el挂载的标签。

Promise的作用

Promise是ES6的语法是异步编程的解决方案类。表面上是把网络请求的动作与请求过来的数据的处理的动作进行分离,防止回调地狱。
可以简单理解为优雅的分离代码,并非必用。

posted @ 2022-01-16 16:44  小松聊PHP进阶  阅读(695)  评论(0编辑  收藏  举报