Vue學習日記（二）——Vue核心思想

時間 2019-12-07

標籤 vue 學習日記核心思想简体版

原文原文鏈接

前言

Vue.js是一個提供MVVM數據雙向綁定的庫，其核心思想無非就是：html

數據驅動
組件系統

數據驅動

Vue.js 的核心是一個響應的數據綁定系統，它讓數據與DOM保持同步很是簡單。在使用 jQuery 手工操做 DOM時，咱們的代碼經常是命令式的、重複的與易錯的。Vue.js 擁抱數據驅動的視圖概念。通俗地講，它意味着咱們在普通HTML模板中使用特殊的語法將 DOM 「綁定」到底層數據。一旦建立了綁定，DOM將與數據保持同步。每當修改了數據，DOM 便相應地更新。這樣咱們應用中的邏輯就幾乎都是直接修改數據了，沒必要與 DOM 更新攪在一塊兒。這讓咱們的代碼更容易撰寫、理解與維護。vue

本人在閱讀vue.js源碼的時候，也發現了vue的數據驅動無非就是利用的是ES5Object.defineProperty和存儲器屬性，我的以爲也是vue比較輕便和靈活的緣由之一。react

getter和setter（因此只兼容IE9及以上版本），可稱爲基於依賴收集的觀測機制。核心是VM，即ViewModel，保證數據和視圖的一致性。git

附：vue.js源碼圖在github上vue打包好的dist文件下面的vue.js能夠找到（該圖與核心技術無關，只是說明vue使用這個屬性）github

這個存儲器屬性也就是vue的核心，也是比jq好的地方之一，jq是經過綁定事件來進行操做dom，而vue和react是經過操做obj的屬性來從新渲染dom框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--
        對入輸入框input輸入的內容都在output裏面輸出
     -->
    <input type="text" id="input">
    <br>
    <span id="output"></span>
</body>
<script>
    // 綁定事件的作法
    // 可是沒有辦法從控制檯控制信息修改value
    document.getElementById("input").addEventListener("keyup", function(e) {
        document.getElementById("output").innerHTML = e.target.value
    })

    // 綁定虛擬dom的作法，就是經過改變一個obj的屬性值
    // 進而改變dom的值
    var obj = {}
    // @obj 能夠是任何一個對象
    // @"string" 動態綁定的屬性值
    // @{} 構造getter和setter
    Object.defineProperty(obj, "string", {
        get: function() {
            console.log("getter")
        },
        set: function(val) {
            document.getElementById("output").innerHTML = val
            document.getElementById("input").value = val
        }
    })
</script>
</html>