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会从缓存中获取数据而不是重新计算