撩課-Web大前端每天5道面試題-Day20

撩課學院發表於2018-12-28
Web前端面試題

1.vue生命週期的作用是什麼？

它的生命週期中有多個事件鉤子，讓我們在控制整個Vue例項的過程時更容易形成好的邏輯。

 

2. Vue實現資料雙向繫結的原理：Object.defineProperty（）?

vue實現資料雙向繫結主要是：
採用資料劫持結合釋出者-訂閱者模式的方式，通過Object.defineProperty（）
來劫持各個屬性的setter，getter，
在資料變動時釋出訊息給訂閱者，觸發相應監聽回撥。
當把一個普通 Javascript 物件傳給 Vue 例項來作為它的 data 選項時，
Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉為 getter/setter。
使用者看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，
在屬性被訪問和修改時通知變化。

vue的資料雙向繫結 將MVVM作為資料繫結的入口，
整合Observer，Compile和Watcher三者，
通過Observer來監聽自己的model的資料變化，
通過Compile來解析編譯模板指令（vue中是用來解析 {{}}），
最終利用watcher搭起observer和Compile之間的通訊橋樑，
達到資料變化 —>檢視更新；
檢視互動變化（input）—>資料model變更雙向繫結效果。


js實現簡單的雙向繫結:

<body>
    <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
</div>
</body>
<script type="text/javascript">
    var obj = {}
    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
    })
</script>

 

3.vue-cli如何新增自定義指令？

1.建立區域性指令

var app = new Vue({
    el: `#app`,
    data: {    
    },
    // 建立指令(可以多個)
    directives: {
        // 指令名稱
        dir1: {
            inserted(el) {
                // 指令中第一個引數是當前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 對DOM進行操作
                el.style.width = `200px`;
                el.style.height = `200px`;
                el.style.background = `#000`;
            }
        }
    }
})

2.全域性指令

Vue.directive(`dir2`, {
    inserted(el) {
        console.log(el);
    }
})
3.指令的使用

<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>

 

4.v-if 和 v-show 區別?

v-if按照條件是否渲染，v-show是display的block或none；

 

5.mvvm和mvc區別？

mvc和mvvm其實區別並不大。
都是一種設計思想。
主要就是mvc中Controller演變成mvvm中的viewModel。
mvvm主要解決了mvc中大量的DOM 操作使頁面渲染效能降低，
載入速度變慢，影響使用者體驗。
和當 Model 頻繁發生變化，開發者需要主動更新到View 。

 

相關文章