但是随着MVVM的不断盛行，如vue、react，他们以数据驱动的开拓办法，大大提升了开拓效率，且更易于项目掩护，数据改变页面自动会变，再加上vue，react自带的模板引擎，让你写起来更加舒畅也更有效率。
看一个大略的例子
vue实现：
<html><body> <!-- View层，既视图层 --><div id='app'><input type="text" v-model="inputValue"/><br><input type="text" v-model:lazy="inputValue"/> <button v-on:click="handleBtnClick">点击</button><ul><li v-for="item in list">{{item}}</li></ul></div> <script> var app = new Vue({ //Model层，既数据层 el: '#app', data: { list: [], inputValue:'' }, methods: { handleBtnClick: function () { this.list.push(this.inputValue) this.inputValue = '' } } }) </script></body></html>
我们能看出vue实现Todolist只须要将文本框输入的数据 直接 push 到list，
剩下的就让vue替我们干了，DOM操作彻底不见了, 我只关心数据怎么变革，这便是数据驱动的上风。
那咱们再看看jquery实现:
<body> <!-- View层，既视图层 --> <div> <input id="input" type="text"/> <button id="btn">提交</button> <ul id="list"></ul> </div> <script> $("#btn").click(function(){ //获取表单的值 var inputTxt = $("#input").val(); if($.trim(inputTxt) === "" ){ return; } var oli = $("<li>" + inputTxt + " </li>"); $("#list").append(oli); $("#input").val(""); }) </script></body>
我们再看jquery，就须要先添加点击事宜，然后获取输入的值，然后创建新的li并将值拼接到内容中，末了append到ul中。比拟一下。jquery是范例的命令式开拓，须要见告程序下一步做什么，除了考虑数据的处理，还得考虑对应的DOM怎么操作。
从jquery的命令式到vue的数据驱动思想的转变确实须要韶光，但数据驱动确实能让我们写的代码更少，同时也更有效率，代码也更随意马虎掩护，由于只是在改变数据，大略的说也便是数据的增加，删除和修正。
那么，Jquery就真的没用了嘛？
当然不是，如果你的页面上有大量的殊效 ，这个时候就不是改改数据能搞定的事情了。尤其在一些殊效丰富，数据没什么交互的活动页。再比如动画种类较多的弹幕等等
这个时候vue本身就很难搞定这些事情了。
由于动画还是须要大量的DOM操作，而vue虽然也支持DOM操作，但是非常不友好。
以是你终极要学会的是场景的分辨。
还有关于你说的SEO的问题
实在只假如利用了AJAX技能，动态加载的内容，对SEO都不友好
这跟用什么框架无关。 以是现在不管是vue还是react都有对应的SSR（做事器端渲染）技能
