vue面试笔记
双向数据绑定 Object.defineProperty()+发布订阅模式
- vue通过Object.defineProperty()来劫持各个属性得getter和setter，在数据变动时发布消息给订阅者，触发相应回调。当在vue实例得data中定义或者触发，vue会遍历它的属性，并通过Object.defineProperty()将他们转为getter/setter。用户虽然看不到getter/setter，在内部他们让vue追踪依赖，在属性被访问或被修改时通知变化
- vue的数据双向绑定将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令(vue中用来解析{{}}这个的)，最终利用Watcher搭起observer和compile之间的通信桥梁，达到数据变化->视图更新；视图交互变化(input)->数据model变更
body:
div id='app'
input id=txt
p id=show
/div
/body
script
Object.defineProperty(obj,'txt', {
get: function() {
return obj
},
set: function(newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function(e) {
obj.txt = e.target.value
})
vue组件传值
- 父向子传值 子组件通过props方法接受数据
- 子向父传值 $emit
- 兄弟间传值 eventBus 新建一个vue实例作为中转站，（项目比较小）
- vuex管理
- store mutations/actions commit
vue路由实现：hash模式 和 history模式
- hash模式：在浏览器中符号'#',#以及#后面的字符称之为hash，用window.location.hash读取；
- hash虽然在URL中，但不被包括在http请求中，对服务端无用，hash不会重载页面，后端无需对路由全覆盖，也不会返回404
- history模式：history采用H5新特效；它提供两个方法：pushState(),replaceState()可以对浏览器历史记录栈进行修改，以及popState事件可以监听到状态变更。
- history模式下，前端的URL必须和实际向后端发起请求的URL一致，如果后端缺少对/xxx/xxx的路由处理，将放回404。此时后端需要对全路由实现覆盖，如果URL匹配不到任何静态资源，应该返回一个页面
vue单页面
- vue的目标通过尽可能简单的API实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。
- MVVM、数据驱动、组件化、轻量、简洁、模块友好。最低只支持到IE9、不利于SEO(可通过服务端进行渲染组件)；首屏加载较慢，不可以通过浏览器实现后退前进功能
计算属性computed
- 在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多此使用的情况下d，尽量使用computed。
- 数据处理结构清晰
- 依赖于数据，数据更新，处理结果自动更新
- 计算属性内部this指向vm实例
- 在template调用时，直接写计算属性名即可
- 常用getter方法获取数据，setter方法设置数据
- 不管依赖的数据是否发生改变，methods都会重新计算，当依赖的数据不变的时候，computed会从缓存中获取数据而不是重新计算
