撩課-Web大前端每天5道面試題-Day20
阿新 • • 發佈：2018-12-28
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 。