vue面试题
1.vue.js的两个核心是什么?
数据驱动和组件系统: 数据驱动:ViewModel,保证数据和视图的一致性。 组件系统:应用类UI可以看作全部是由组件树构成的。
2.双向数据绑定的原理?
vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。
3. v-if和v-show有什么区别?
v-show 仅仅控制元素的显示方式,将display属性在block和none来回切换;而v-if会控制这个Dom节点的存在与否。 当我们需要经常切换某个元素的显示/隐藏时,使用v-show会更加节省性能上的开销;当只需要一次显示或隐 藏时,使用v-if更加合理。
4. methods,computed和watch的区别?
methods:重要重新渲染,method调用总会执行该函数。
computed:相当于一个具备缓存的watcher,计算属性是根据它的相关依赖进行缓存,只有它的相关依赖发生改变,它才会重新求值。
Watch:没有缓存性,更多的是观察的作用,可以监听某些数据执行回调。 当我们需要深度监听是需要用:deep:true 初始化监听:immediate:true
5. 说?下你对单向数据流的理解?
单向数据流主要是vue 组件间传递数据是单向的,即数据总是由父组件传递给子组件,子组件在其内部维护自己的数据,但它无权修改父组件传递给它的数据,当开发者尝试这样做的时 候,vue 将会报错。这样做是为了组件间更好的维护。在开发中可能有多个子组件依赖于父组件的某个数据,假如子组件可以修改父组件数据的话,一个子组件变化会引发所有依赖这个数据的子组件发生变化,所以 vue 不推荐子组件修改父组件的 数据。
6.data为什么是一个函数?
避免组件中的数据互相影响,同一个组件被复用多次后会创建多个实例,如果data是一个对象的话,这些实例用的都是同一个构造函数。这样就会影响到所有的实例,所以为了保证组件不同的实例之间data不冲突,data必须是一个函数。
7. vue中 keep-alive 组件的作用
作用: 用于保留组件状态或避免重新渲染(缓存的作用) 比如: 当一个目录页面与一个详情页面,用户经常:打开目录页面=>进入详情页面=>返回目录页面=>打 开详情页面,这样目录页面就是一个使用频率很高的页面,那么就可以对目录组件使用 <keep-alive></keep-alive> 进行缓存,这样用户每次返回目录时,都能从缓存中快速渲染,而不用重新渲染。
1、属性: include :字符串或正则表达式。只有匹配的组件会被缓存。 exclude :字符串或正则表达式。任何匹配的组件都不会被缓存。 2、两个生命周期: activated 和deactivated 用来得知当前组件是否处于活跃状态 3、用法: 包裹动态组件时,会缓存不活动的组件实例,?不是销毁它们。和 <transition> 相似,<keep- alive> 是?个抽象组件:它?身不会渲染?DOM 元素,也不会出现在?组件链中。
当组件在<keep-alive> 内被切换,在 2.2.0 及其更?版本中,activated 和 deactivated? 命周期 将会在 树内的所有嵌套组件中触发。
8.ref的作用?
- 获取dom元素:
this.$ref.box - 获取子组件中的this:
this.$refs.box.msg - 调用子组件中的方法:
this.$refs.box.open()
9.params和query的区别?
- 引入方式不同: query要使用path来引入,params要使用name来引入,接受参数格式类似,引用分别是
this.$route.query.name和this.$route.params.name - 形成的路径不同(或者url地址显示不同): 使用query传参的话,会在浏览器的url栏看到传的参数类似于get请求,使用params传参的话则不会,类似于post请求。
params传递后形成的路径: /router/123,/router/zhangsan query传递后形成的路径: /router?id=666&name=zhangsan - 是否受动态路径参数影响 Query传递的参数不会受路径参数的影响,会全部展示到路径上,刷新不会丢失query里面的数据; params传递的参数会受路径参数的影响,只会展示含有动态路径参数的部分,刷新会丢失没有设置动态路径参数的params的数据。
10.谈谈你对MVVM开发模式的理解?
MVVM分为Model、View、Viewmodel三者。 Model:代表数据模型,数据和业务逻辑都在Model层中定义; View:代表UI视图,负责数据的展开; ViewModel:负责监听Model中数据的改变并且控制视图的更新,处理用户交互操作; 总结: Model和View并无直接关联,而且通过Viewmodel来进行联系的,Model和Viewmodel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新,View中由于用户交互操作而改变的数据也会在Model中同步。这种模式实现了Model和View的数据自动同步,因此开发者只需要专注对数据的维护操作即可,而不需要自己操作dom。
|