vue面试题

什么是mvvm

1. 是Model-View-ViewModel缩写
2. 一种设计思想
3. Model代表数据模型 ，View代表UI组件，ViewModel是一个同步View和Model的对象。
4. Model和View没有直接联系，通过ViewModel进行交互
5. Model和ViewModel双向交互
6. View和Model之间的同步是自动的，无需人为干涉
7. 只需要关注业务逻辑，不需要手动操作dom

mvvm和mvc区别

1. 区别不大，都是一种设计思想。

2. mvc中的Controller演变成了mvvm中的ViewModel

3. mvvm解决了MVC中的大量的操作dom使页面渲染性能降低，加载速度变慢的问题。

4. 当Model频繁发生变化，开发者需要主动更新到view

vue的优点

1. 低耦合
2. 可重用
3. 独立开发
4. 可测试

vue生命周期

创建前/后：在beforeCreate阶段，vue实例挂载元素el还没有。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但是还是挂载之前虚拟dom的节点，data.message还未替换。
在mounted阶段 vue实例挂载完成，data.message渲染成功。

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：在执行destroy方法后，对data函数的改变不会再触发周期函数，此时vue已经解除了事件监听以及和dom的绑定，但dom结构依然存在。

组件之间传值

1. 父组件与子组件传值

//父组件通过标签上面定义传值
<Main :obj="data"></Main>
<script>
	//引入子组件
	import Main from './main'
	exprot default{
		name:"parent",
		data(){
		return {
			data:"向子组件传数据"
		}
		},
		components:{
		Main
		}
		
	}
</script>



//子组件通过props接收数据
<div>{{data}}</div>
<script>
	exprot default{
		name:"son",
		props:["data"]
}
</script>

2. 子组件向父组件传参

//子组件  通过this.$emit()的方式将值传递给父组件
<template>
    <div class="app">
       <input @click="sendMsg" type="button" value="给父组件传递值">
    </div>
</template>
<script>
	exprot default{
		data(){
			return {
				msg:"子组件信息"
			}
		},
		methods:{
			sendMsg(){
			this.$emit('func',this.msg)
			//func :父组件指定的传参数据绑定的函数，this.msg:子组件给父组件传递的数据
			}
	}
	}
</script>

//父组件
<template>
	<div class="app">
		<child @func="getMsgFormSon"></child>
	</div>
</template>
<script>
import child from './child'
exprot default{
	data(){
	return {
		msgFormSon:"this is msg"
	}
},
components:{
	child,
},
methods:{
	getMsgFormSon(data){
		this.msgFormSon=data
		console.log(this.msgFormSon)
}
}
}
</script>

active-class是哪个组件的属性

vue-router 模块的router-link组件