理解vue與MVVM三要素

MVVM到底是什麼，跟Jquery有什麼區別？

• MVVM理解，跟MVC區別

  • Model View Controller,一般是使用者操作view檢視按鈕，觸發controller內方法，cotroller修改model資料，model通知view，算是後端開發的主流思想
  • vue中template為View, data物件為Model,new Vue({el,data,methods})為ViewModel，連線檢視view與data，view通過DOMlistenser事件`on`繫結來操作model,model通過資料繫結dataBinding操作view

  • 資料，檢視層是否分離

    • vue中，proxy代理_data資料，並且不允許直接修改。template為檢視
    • 不分離背離了開放封閉的原則，不利於維護，功能擴充套件

  • 以資料驅動檢視

    • 只修改資料，就會觸發封裝好的dom操作。不需要手動進行dom操作

• MVVM 實現三要素

  • 如何監聽變化，實現響應式

    • Object.defineProperty設定get,set監聽data變化
    • vm.data，利用Object.defineProperty，proxy代理data物件,便於render函式中的this取值

  • 檢視模板解析，模板引擎

    • 本質是字串，有v-if,v-for等邏輯，需要以js執行

    • 將js中data物件屬性捆綁到render函式，最後返回vnode，render函式中結構與snabbdom中h函式相似

      // vue
      function render () {
        with (this) {  //將_c,_v,price的this省略，相當於this._c,this._vthis.price
          _c(`div`, {attrs: {`id`: `app`}}, [_c(`span`, [_v(_s(price))])])  //_c建立vnode，_v字串節點，_s字串轉話
        }
      }
      // snabbdom
       h(`div#app`, [
         h(`span`, vm.price)
       ])

  • dom如何生成的，如何在監聽變化後渲染,使用patch方法與snabbdom相同

    • 首次渲染

    • 更新渲染

      vm._update(vnode) {
        const prevVnode = vm.vnode
        vm._vnode = vnode
        if (!prevVnode) {
          vm.$el = vm.__patch__(vm.$el,vnode) //初次渲染
        } else {
          vm.$el = vm.__patch__(prevVnode,vnode)
        }
      }
      function updateComponent() {
        vm._update(vm._render()) //此處render即是模板轉化的render函式，執行後可生成vnode
      }