理解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
        }