vue面試筆記

雙向數(shù)據(jù)綁定 Object.defineProperty()+發(fā)布訂閱模式

• vue通過Object.defineProperty()來劫持各個(gè)屬性得getter和setter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者嗽元，觸發(fā)相應(yīng)回調(diào)翩迈。當(dāng)在vue實(shí)例得data中定義或者觸發(fā)吐葱，vue會(huì)遍歷它的屬性残吩，并通過Object.defineProperty()將他們轉(zhuǎn)為getter/setter癣亚。用戶雖然看不到getter/setter颤霎，在內(nèi)部他們讓vue追蹤依賴蛤虐，在屬性被訪問或被修改時(shí)通知變化
• vue的數(shù)據(jù)雙向綁定將MVVM作為數(shù)據(jù)綁定的入口党饮，整合Observer，Compile和Watcher三者驳庭，通過Observer來監(jiān)聽自己的model數(shù)據(jù)變化刑顺，通過Compile來解析編譯模板指令(vue中用來解析{{}}這個(gè)的)，最終利用Watcher搭起observer和compile之間的通信橋梁饲常，達(dá)到數(shù)據(jù)變化->視圖更新蹲堂；視圖交互變化(input)->數(shù)據(jù)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方法接受數(shù)據(jù)
• 子向父傳值 $emit
• 兄弟間傳值 eventBus 新建一個(gè)vue實(shí)例作為中轉(zhuǎn)站，（項(xiàng)目比較斜从佟）
• vuex管理
  • store mutations/actions commit

vue路由實(shí)現(xiàn)：hash模式 和 history模式

• hash模式：在瀏覽器中符號(hào)'#',#以及#后面的字符稱之為hash柒竞，用window.location.hash讀取播聪；
• hash雖然在URL中朽基，但不被包括在http請(qǐng)求中布隔，對(duì)服務(wù)端無用，hash不會(huì)重載頁面稼虎，后端無需對(duì)路由全覆蓋衅檀，也不會(huì)返回404
• history模式：history采用H5新特效；它提供兩個(gè)方法：pushState(),replaceState()可以對(duì)瀏覽器歷史記錄棧進(jìn)行修改霎俩，以及popState事件可以監(jiān)聽到狀態(tài)變更哀军。
• history模式下，前端的URL必須和實(shí)際向后端發(fā)起請(qǐng)求的URL一致茸苇，如果后端缺少對(duì)/xxx/xxx的路由處理排苍，將放回404沦寂。此時(shí)后端需要對(duì)全路由實(shí)現(xiàn)覆蓋学密，如果URL匹配不到任何靜態(tài)資源，應(yīng)該返回一個(gè)頁面

vue單頁面

• vue的目標(biāo)通過盡可能簡單的API實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件传藏，核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)腻暮。
• MVVM、數(shù)據(jù)驅(qū)動(dòng)毯侦、組件化哭靖、輕量、簡潔侈离、模塊友好试幽。最低只支持到IE9、不利于SEO(可通過服務(wù)端進(jìn)行渲染組件)卦碾；首屏加載較慢铺坞，不可以通過瀏覽器實(shí)現(xiàn)后退前進(jìn)功能

計(jì)算屬性computed

• 在模板中放入太多的邏輯會(huì)讓模板過重且難以維護(hù)，在需要對(duì)數(shù)據(jù)進(jìn)行復(fù)雜處理洲胖，且可能多此使用的情況下d济榨，盡量使用computed。
  • 數(shù)據(jù)處理結(jié)構(gòu)清晰
  • 依賴于數(shù)據(jù)绿映，數(shù)據(jù)更新擒滑，處理結(jié)果自動(dòng)更新
  • 計(jì)算屬性內(nèi)部this指向vm實(shí)例
  • 在template調(diào)用時(shí)，直接寫計(jì)算屬性名即可
  • 常用getter方法獲取數(shù)據(jù)叉弦，setter方法設(shè)置數(shù)據(jù)
  • 不管依賴的數(shù)據(jù)是否發(fā)生改變丐一，methods都會(huì)重新計(jì)算，當(dāng)依賴的數(shù)據(jù)不變的時(shí)候淹冰，computed會(huì)從緩存中獲取數(shù)據(jù)而不是重新計(jì)算