MVVM

题目：

说一下使用jQuery和使用框架的区别

• 我们通过做一个todo-list例子来看下区别

    <!-- jQuery实现todo-list -->
    <div>
        <input type="text" name="" id="txt-title">
        <button id="btn-submit">submit</button>
    </div>

    <div>
        <ul id="ul-list"></ul>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script text="text/javascript">
        var $txtTitle = $('#txt-title')
        var $btnSubmit = $('#btn-submit')
        var $ulList = $('#ul-list')
        $btnSubmit.click(function(){
            var title = $txtTitle.val()
            if(!title){
                return
            }
            var $li = $('<li>'+title+'</li>')
            $ulList.append($li)
            $txtTitle.val('')
        })

    </script>

    <!-- vue实现todo-list -->
    <div id="app">
        <input type="text" v-model="value">
        <button @click="handleSubmit">submit</button>
        <ul>
            <li v-for="(item,index) in lists" :key="index">{{item}}</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                value:'',
                lists:[]
            },
            methods:{
                handleSubmit(){
                    if(!this.value){
                        return 
                    }
                    this.lists.push(this.value)
                    this.value = ''
                }
            }
        })
    </script>

区别从两个方面来讲

• 数据和视图的分离,解耦(开放封闭原则)
  根据下边代码我们得知，jquery中数据和视图根本没有分离的。
  jQuery的列表只是一个空壳，里边没有元素，真列表真正的内容(li)和数据混合在一起了。是结合输入内容，创建的一个一个列表元素

    <div>
        <input type="text" name="" id="txt-title">
        <button id="btn-submit">submit</button>
    </div>
    <div>
        <ul id="ul-list"></ul>
    </div>
     var $li = $('<li>'+title+'</li>')
     $ulList.append($li)
     // 以上代码都属于视图部分
     // 下边是属于数据部分
    var title = $txtTitle.val()
    $txtTitle.val('')

vue是数据和视图分离的

    //vue的视图是完整的，列表内容除了ul外壳，列表内容li也是完整的，虽然我们只看到了一个li标签，但是框架会根据lists数组元素的数量去帮我们循环出所有的li
        <input type="text" v-model="value">
        <button @click="handleSubmit">submit</button>
        <ul>
            <li v-for="(item,index) in lists" :key="index">{{item}}</li>
        </ul>
    // 这个就是我们todolist的所有数据
    data:{
         value:'',
         lists:[]
    }

• 以数据驱动视图，只关心数据的变化，DOM操作被封装
  jQuery不是以数据驱动视图的
  因为我们在jQuery中，都是通过api直接修改DOM结构从而修改视图

        $btnSubmit.click(function(){
            var title = $txtTitle.val()
            if(!title){
                return
            }
            var $li = $('<li>'+title+'</li>')
            $ulList.append($li)
            $txtTitle.val('')
        })

而Vue中我们只是修改了数组数据，然后由框架根据数据的变化去修改了视图

      handleSubmit(){
           if(!this.value){
                return 
           }
           this.lists.push(this.value)
           this.value = ''
      }

如何理解MVVM

在了解MVVM之前，我们先了解下MVC

• M model模型数据

• V view视图界面，视图是依据模型数据创建的

• C controller控制器，逻辑处理，是应用程序中处理用户交互的部分，控制器从视图读取数据，控制用户的输入，并向数据模型发送数据

  
  image.png
  

  MVC的流程一般是这样的，用于在view中操作，触发了事件，然后控制器控制修改model，然后model再把model的变化同步到view中

  
  image.png
  当然还有一种情况，用户直接操作controller
  image.png

如何实现MVVM

Vue如何实现响应式

Vue如何解析模板

Vue的整个实现流程