No2.12 前端面试题 1. vue刷新数据丢失怎么解决 2. `computed`和`watch`的区别 3. vuex 4. vue数据双向绑定原理

1. vue刷新数据丢失怎么解决

1. 把数据直接保存到浏览器缓存里(cookie localstorage sessionstorage)
2. 页面刷新时,再次保存数据.达到可以动态刷新的方法

• 监听浏览器刷新时间,在刷新前把数据保存到sessionstorage里,刷新后请求数据,如果请求到了就用vue,否则就用sessionstorage里的数据

2. computed和watch的区别

|computed|watch|
|计算属性|监听,监听data中数据的变化|
|支持缓存,依赖的属性发生变化,计算属性才会重新计算,否则用缓存|不支持缓存|
|不支持异步|可以异步操作|
|第一次加载就监听|第一次不监听|
|函数中必须有return||

3. vuex

1. state存储变量
2. getters 是state的计算属性
3. mutations 提交更新数据的方法
4. actions 类似于mutations,他是提交mutations来修改数据.包括异步操作
5. modules 模块化vuex

4. vue数据双向绑定原理

1. 什么是vue数据双向绑定原理?

• 是通过数据劫持结合发布者-订阅者模式的方式来实现的。其核心就是通过Object.defineProperty()方法设置set和get函数来实现数据的劫持，在数据变化时发布消息给订阅者，触发相应的监听回调。也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

var obj = {}
Object.defineProperty(obj,'prototypeName',{
	get: function() { 
		console.log("调用了get") 
	},
	set: function(newValue) {
		console.log("调用了set,新值是"+newValue)  
	}
})

obj.prototypeName    // 调用了get
obj.prototypeName = 'hello'   // 调用了set,新值是hello

2. 如何实现?

• 1. 首先再vue初始化的时候，就对data数据进行了劫持监听，其中就是监听器 Observe，用来监听所有属性。
• 2. 若有属性发生变化就需要告诉订阅者Watcher看是否需要更新。
• 3. 因为订阅者Watcher有多个，所以需要一个消息订阅器 Dep 来专门收集这些订阅者，在监听器Observe和订阅者Watcher之间进行统一管理。
• 4. 还需要有一个指令解析器 Compile ，对每个节点元素进行扫描解析，将相关的指令（如 v-model，v-on …）对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应函数
• 5. 当订阅者Watcher接收到相应属性的变化通知，就会执行对应的更新函数，从而去更新视图。