脚本宝典收集整理的这篇文章主要介绍了理解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
        }

脚本宝典总结

以上是脚本宝典为你收集整理的理解vue与MVVM三要素全部内容，希望文章能够帮你解决理解vue与MVVM三要素所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。