面试必会的Vue面试题一

1、vue中的MVVM是什么?
即Model-View-ViewModel,Model代表数据模型,也可以在Model中定义和修改数据的逻辑。
View代表UI组件,它负责将数据模型转化成UI展现出来。
ViewModel监听数据的改变和控制视图行为,处理用户交互,简单理解就是同步View和Model的视图对象,连接Model和View。
在MVVM架构下,View和Model直接并没有直接的联系,而是通过VIewModel进行交互,Model和ViewModel之间的交互是双向的,因此,View的数据变化会同步到Model中,而Model的数据变化也会立即反应到View上。
ViewModel通过书香数据绑定把View层和Model层连接了起来,而View和Model之间的同步完全是自动的,因此开发者只关注业务逻辑 不需要操作DOM,不需要关心数据同步的问题,复杂的数据维护状态完全有MVVM来统一管理。

2、v-if和v-show有什么区别?
v-if和v-show都是条件渲染,v-show的原理是切换css的display的block和none,性能比较好,适用于频繁的切换。
v-if原理是直接将DOM结构添加删除,不适用于频繁的切换。

3、如何让css组件只在当前组件中起作用?
在style标签中添加scoped属性

4、阐述vue 的生命周期过程,生命周期函数有哪些,在哪几个钩子函数中发送Ajax请求?
vue生命周期运行过程:
1、new vue实例诞生。
2、初始化了生命周期和生命周期中的事件。
3、初始化数据。
4、检查是否有el选项。
5、检查是否有template属性选项。
6、没有template,将el指向的元素html代码编译成模板。
7、将模板用数据补充,创建出来的vm. e l ( 有 数 据 的 h t m l 代 码 ) , 接 着 用 v m . el(有数据的html代码), 接着用vm. elhtmlvm.el把页面中的el所在位置元素给替换掉了。
8、此时页面已经进入稳定的运行状态了==>此时页面开始监听数据变化==>当数据发生变化的时候vue更新页面内容,继续监听。
9、vue实例不会自然死亡,当我们调用vm.$destory方法的时候。
10、卸载所有的数据监听,组件,事件监听。

生命周期钩子函数:
1.创建create
beforeCreate数据初始化之前执行,此时拿不到数据 ==>created 初始化数据完成之后执行的,可以拿到数据。
2.挂载mounted
beforeMounted:当渲染好的元素被挂载到页面之前调用,此时拿不到有数据的DOM,指令拿到的还是原有的,没有被解析的 ==> mounted当渲染好的元素被挂载到页面之后调用,此时可以拿到最新的Dom
3.更新update
beforeUpdate:当数据发生变化,但Dom还没有被更新之前调用,此时访问Dom拿到的还是之前旧的内容 ==> updated 当有数据发生变化,Dom也更新完之后调用,此时访问的Dom就是最新的内容。
4.销毁destroy
将vm.$destroy方法被调用的时候,vm对象就要销毁了,销毁指的是功能解除,不再做任何数 据绑定更新操作,但vm对象还在
①beforeDestroy:在功能销毁前调用
②destroyed:在功能销毁后调用
在created中和mounted中都可以发送Ajax请求。

5、vue第一次加载会触发哪几个钩子函数?
第一次加载会触发beforeCreated,created,beforeMounted,mounted

6、vue中的dom更新在哪个阶段完成
mounted

7、vue中的data为什么是个函数?
js中的实例是通过构造函数创建出来的,每个构造函数都会new出来很多实例,那么就会继承原型上的方法或属性。
vue的data数据其实就是vue原型上的数据,数据存在于内存当中,vue为了保证每个实例上的data数据的独立性,规定了必须使用函数而不是对象。
因为使用对象的话,每个实例上的data是相互影响的,对象是基于内存地址的引用,直接定义对象的话组件都会使用这个对象,就会造成组件数据相互影响。

8、v-for中遍历的key的作用是什么?
当vue用v-for正在更新已渲染的列表时,它默认才用就地复用的策略,如果数据顺序发生改变,vue将不会移动dom来匹配数据项的顺序,而是简单服用此处的每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

9、vue中实现双向绑定的原理
通过object.definePropety中的get和set方法,get访问器,set设置器

10、vue中组件之间的相互传值
1.父组件给子组件传值,用的是属性传值
父组件在使用子组件的时候,可以将需要的数据直接通过组件标签传递,子组件中,需要声明props数组,在数组中添加,对应的属性名,来接收父组件传递过来的数据,在数组中的属性名,必须和父组件传递数据的属性名完全一致,在子组件中就可以通过属性名直接访问父组件的数据了,父组件给子组件传递的数据是动态变化的,如果父组件的值变化,子组件的值也会变化。

2.子组件给父组件传递数据,用的是事件传值
在在父组件中声明一个接受数据改变的函数,父组件中的函数注册给子组件做为事件,在子组件中,触发事件,再把数据通过参数的形式传递过去。

3.非父子组件通信
Global Event Bus 通过给eventbus注册事件,别的组件触发事件,实现通信。
创建一个eventbus对象,即创造一个vue对象,用作传递到信息,接收信息的一方将事件通过 vm. o n ( “ 事 件 名 ” , 事 件 处 理 函 数 ) 添 加 在 e v e n t b u s 对 象 上 发 送 数 据 的 一 方 , 通 过 v m . on(“事件名”,事件处理函数)添加在eventbus对象上发送数据的一方,通过vm. on(,)eventbusvm.emit(“事件名”,传递的数据)触发事件,将数据传递。

猜你喜欢

转载自blog.csdn.net/weixin_46533797/article/details/115160827