1.vue生命周期的作用是什麼？ 2. Vue實現數據雙向綁定的原理：Object.defineProperty（）? 3.vue-cli如何新增自定義指令？ 4.v-if 和 v-show 區別? 5.mvvm和mvc區別？ ...
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 。
