vue的常见面试题讲解

vue的常见面试题讲解

1.谈谈你对MVVM开发模式的理解

• MVVM分为Model、View、ViewModel三者
  • Model：代表数据模型，数据和业务逻辑都是在Model层中定义
  • View：代表UI视图，负责对数据的展示
  • ViewModel：负责监听Model中数据的改变并控制视图的更新，处理用户交互操作

Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。

这种模式实现了Model和View的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作dom。

2.对于组件通信你了解多少，请描述一下你是怎么完成组件的通信的

• 父传子用 props传递
• 子传父用$emit传递
• 非父子之间的传值 建立一个空实例进行传值，中央事件总线机制
• 祖孙之间的传值可以利用provide inject模式

VUEX可以处理上述的每一个情况

3.关于单页应用首屏加载速度慢，出现白屏时间过长问题你怎么处理

• 将公用的JS库通过script标签在index.html进行外部引入，减少我们打包出来的js文件的大小，让浏览器并行下载资源文件，提高下载速度
• 在配置路由的时候进行路由的懒加载，在调用到改路由时再加载次路由相对应的js文件
• 加一个首屏loading图或骨架屏，提高用户的体验
• 尽可能使用CSS Sprites和字体图标库
• 图片的懒加载等

4. 从输入网址到网页渲染完成经历了什么

1. 输入网址按回车键或点击跳转
2. 发送到DNS服务器进行DNS解析，获取到我们对应web服务器对应的ip地址
3. 与Web服务器建立TCP连接
4. 浏览器向web服务器发送http请求
5. Web服务器进行响应请求并返回指定的url数据（当然这里也可能是错误信息或者重定向到新的url地址等）
6. 浏览器下载web服务器返回的数据及解析html源文件
7. 根据文件生成DOM树和样式树合成我们的渲染树，解析js，最后渲染我们的页面然后显示出来

5. 关于修改了数据，视图不更新的理解和处理方式

1. Vue中给data中的对象属性添加一个新的属性时会发生什么

   经过打印发现数据是已经改变了，但是由于在Vue实例创建时， 新添加的属性并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新，这时就需要使用Vue的全局api——> $set()

   $set()使用方法：

   $set(需要修改的对象，“对象的属性”,值)

<div id="app">
	<ul>
		<li v-for="(item,index) in obj" :key='index'>{{item}}</li>
	</ul>
	<button @click='add'>添加新属性d</button>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
	new Vue({
		el:'#app',
		data(){
			return {
				obj:{
					'a':'我是a',
					'b':'我是b',
					'c':'我是c',
				}
			}
		},
		methods:{
			add(){
				// this.obj.d='我是d'
				this.$set(this.obj,'d','我是d')
				console.log(this.obj)
			}
		}
	})
</script>

6.在vue里面你如何做数据的监听

1. watch里面监听

• 第一种写法

  ​watch:{
    ​obj(newval,oldval){
    ​	console.log(newval,oldval)
    ​},
  }

• 第二种写法可设置deep为true对数据进行深层遍历监听

watch:{
   obj:{
    ​handler(newval,oldval){
    ​	console.log(222)
    ​	console.log(newval,oldval)
    ​},
    ​deep:true
    ​}
}

2. computed 里面监听

  - computed里面的依赖改变时，所计算的属性或作出事实的改变