前端面試準備筆記系列之vue(01)

時間 2021-02-18

標籤 javascript css html vue java jquery 編程瀏覽器架構 app 欄目快樂工作简体版

原文原文鏈接

01. 對於MVVM的理解?

Model 表明數據模型
View 視圖，表明UI組件，負責將數據模型經過UI展現出來
ViewModel 監聽Module改變View，監聽數據模型控制視圖的行爲，處理交互。
在MVVM架構下，View和Model並無直接的連繫，而是經過ViewModle進行交互，所以開發者只須要關注業務邏輯，不須要手動控制DOM，不須要關注數據狀態的同步問題。
以前的jquery開發是面向dom開發，而MVVM是面向數據編程，DOM操做被簡化，通常能減小30%左右的代碼量。

02. 概述Vue以及優缺點？

Vue自己並非一個框架，它是結合周邊的生態構成了一個靈活的、漸進式框架。
Vue的核心思想：數據驅動、組件化
Vue和React,目前都是用了virtual Dom(虛擬dom)實現快速渲染，都是輕量級，響應式組件，服務端渲染，易於集成路由工具，打包工具以及狀態管理，都具備優秀的支持和社區。

虛擬dom：
DOM是文檔對象模型，整個html文檔就是一個dom。
virtual dom，虛擬dom，就是在js內存中構建一個相似dom的對象，去模擬dom進行數據拼裝，進行渲染和解析，最後一次性插入html的dom片斷中去。javascript

03. vue等單頁面應用及其優缺點

優勢：Vue 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件，核心是一個響應的數據綁定系統。MVVM、數據驅動、組件化、輕量、簡潔、高效、快速、模塊友好。
缺點：不支持低版本的瀏覽器，最低只支持到IE9；不利於SEO的優化（若是要支持SEO，建議經過服務端來進行渲染組件）；第一次加載首頁耗時相對長一些；不可使用瀏覽器的導航按鈕須要自行實現前進、後退

04. Vue實現數據雙向綁定的原理

Object.defineProperty()
vue實現數據雙向綁定主要是：採用數據劫持結合發佈者-訂閱模式的方式，經過Object.defineproperty()來劫持各個屬性的setter，getter方法，在數據變更的時候發佈消息給訂閱者，觸發相應的監聽回調。把一個普通的JavaScript對象傳給Vue實例做爲它的data選項時，Vue將遍歷它的屬性，用Object.defineProperty()將他們轉爲getter/setter,用戶看不到，可是在內容讓vue進行追蹤，在屬性被訪問和修改的時候通知變化。css

<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>