vue面试题①

一、vue 双向数据绑定的原理

vue中的双向数据绑定是采用数据劫持和发布者-订阅者的模式，通过object.defineproperty()来劫持各个属性的setter、getter，
在数据变动时发布消息给订阅者触发相应的监听回调来渲染视图页面，实现数据和视图同步。

第一步：

需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter，这样一来，在给某一个值赋值时就会触发setter，就可以监听到数据的变化了。

第二步：

compile解析模板指令，将模板中的变量变成数据，然后初始化渲染页面视图，并将每个指令对应的节点都绑定上更新函数，添加数据监听的订阅者，一旦数据有变动，收到通知，更新视图。

第三步：

watcher订阅者是observer和compile之间通信的桥梁，主要做的事情是：
1.在自身实例化时往属性订阅器（dep）中添加自己。
2. 自身必须有一个update()方法
3.当属性变动 dep.notice()通知时，能够调用自身的update()方法，并且触发compile中绑定的回调，则功成身退。

第四步：

MVVM作为数据绑定的入口，整合observer、compile和watcher三者，通过obsever来监听自己的model数据变化，通过compile来解析模板指令，最终利用watcher搭起observer和compile之间通信的桥梁，达到数据变化👉试图更新，视图交互变化(input)👉数据model变更的双向绑定效果。

二、vue中的虚拟DOM、Diff算法

想要理解虚拟DOM，首先要知道什么是虚拟DOM

	虚拟DOM可以简单的用一句话概括，就是用一个普通的js对象来描述DOM结构，因为不是真实的DOM，所以称之为虚拟DOM。
	虚拟DOM是相对于浏览器所渲染出来的真实DOM而言。在react、vue出现之前，我们要改变页面展示的内容，需要遍历查询DOM结构，找到要修改的DOM，然后修改DOM的样式行为或结构，来达到更新视图的目的。

为什么要用虚拟DOM来描述真实DOM呢？

	创建真实的DOM成本比较高，使用对象来描述一个DOM节点成本比较低，另外我们在频繁操作DOM也是一种比较大的开销。所以建议使用虚拟DOM来描述真实DOM。

Diff算法

	Diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新DOM。

思考

你觉得虚拟DOM的性能一定高于常规DOM吗？

答案是不一定的。虚拟DOM和Diff算法的出现是为了解决由命令式编程转变成函数式编程、数据驱动后所带来的性能问题的。换句话说，直接操作DOM的性能并不会低于虚拟DOM和Diff算法，甚至还会优于。

**你觉得使用了虚拟DOM就真的不操作DOM元素了吗？ **

其实不是的，虚拟Dom只是减少了用户操作Dom,虚拟Dom在渲染的时候其实还是会操作Dom的。

三、组件通讯

1.父传子

在父组件的子组件标签上绑定一个属性，挂载要传输的变量。在子组件中通过props来接受数据，props可以是数组，也可以是对象，接受的数据可以直接使用props:[‘属性名’]，props:{属性名:数据类型}。

2.子传父

在父组件的子组件标签上通过绑定自定义事件，接受子组件传递过来的事件。子组件通过$emit触发父组件上的自定义事件，发送参数。

3.兄弟组件传值

通过main.js初始化一个全局的$BUS，在发送事件的一方通过$bus.$emit("事件名"，传递的参数信息)发送，在接收事件的一方通过$bus.$on(“事件名”，参数)接收传递的事件。

四、Vuex

1.概念

vuex是一个专为vue.js开发的状态管理器，采用集中存储的所有组件状态，通过vuex我们可以解决组件之间数据共享的问题，后期也方便我们管理以及维护。

Vuex有五个属性：分别是state、getters、mutations、actions、modules。

state属性：存放状态，例如你要存放的数据；
getters：计算属性，类似于共享属性，可以通过this.$ store.getters来获取存放在state里面的数据；
mutations：唯一能改变state的状态就是通过提交mutations来改变，this.$store.commit(“mutations中的函数名”，传递的参数);ps：传递的参数只有一个可以是数组也可以是对象也可以是单个的值

2.基本使用

可以在根目录中创建一个store文件夹，里面创建一个index.js，最后在main.js中引入并挂载到实例上，之后那个组件中需要用到Vuex就调用就可以了。

3.高级用法-数据持久化

在Vuex中存放的数据经常一刷新就会消失，为此我们就需要用到数据持久化。
解决办法：
①存放在localstorage或者sessionStorage里面，进入页面判断是否丢失，丢失再去localStorage或者 sessionStorage中获取；
②直接在vuex中安装vuex-persistedstate插件，进行持久化配置即可。

高级语法-辅助函数（语法糖）

1.有那么几个辅助函数（四大金刚）
mapState、mapActions、mapMutations、mapGetters
2.辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的。
3.如何使用： Import {mapState,mapActions,mapMutations,mapGetters} from 'vuex'

自定义指令、自定义过滤器

vue中的自定义指令：

vue中除了核心功能内置的指令外，也允许注册自定义指令。有的情况下，对普通DOM元素进行底层操作，这时候就用到了自定义指令。自定义指令又分为全局自定义指令和局部自定义指令，全局自定义指令是通过vue.directive(‘第一个参数是指令的名称’，{第二个参数是一个对象，这个对象上有钩子函数})

//全局自定义指令：
Vue.directive('focus',
	//el:指令所绑定的元素，可以用来直接操作DOM，
	//binding：一个对象，包含以下property：
	inserted:function(el){
		el.focus();
	}
})

//局部自定义指令：是定义在组件内部的，只能在当前组件中使用。
directies:{
	//指令名称
	dir1:{
		inserted(el){
			//指令中第一个参数是使用自定义指令的DOM
			console.log(el);
			console.log(arguments)；
			//对Dom进性操作
			el.style.width = '200px';
			el.style.height = '200px';
			el.style.background = '#000';
		}
	},
	color:{ //为元素设置指定的字体颜色
		bind:(el,binding){
			el.style.color = binding.value
		}
	}
}

钩子函数：

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。
项目中：拖拽

---