前言
本文适用于还在使用传统js原生和jquery方式操作dom的小伙伴，以及还在困惑，究竟是传统js/jqurry开发效率高对开发者友好还是vue表现得更好。那么废话少说，让我们一起来对比以下jquery和vue实现同一个示例代码，看看究竟谁更简单易用。
在这之前，先让我们介绍以下参赛的双方选手：vue和jquery。
简单介绍一下vue
vue一套用于构建用户界面的框架，vue的核心库只关注视图层，方便与第三方库整合。
vue必须要有html/css/js作为基础。
再介绍一下jquery
jquery是老牌js工具库，用于简化js代码。jquery提供了许多简化js操作的方法，比如dom选择器，事件监听，ajax等
介绍完选手，就直接开始吧，我们直接使用vue官方得几个示例来简单说明。
第一个示例：编写hello word!，绑定修改元素text属性
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
<html>这个代码主要演示了vue的主要功能：”声明式渲染“，数据和 DOM 已经被建立了关联。
类似模板引擎一样，在前端页面对页面元素进行渲染。
吐槽：官方文档里讲的没有与#app元素交互也是扯淡，我们眼都不瞎，这明显是绑定#app元素并修改其内容了啊。
让我们来看看jquery版本：
与jquery版本示例对比
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<div id="app"></div>
</body>
<script>
$("#app").text("hello jqeury!");
</script>
<html>显然，第一个示例，vue并没有体现出优势，对于刚上手vue的开发者来说，比起jqeury只需要一个选择器，vue得绑定显得有些臃肿和复杂。当然，这只是第一个示例，下面让我们继续看下去，看看后面得结果是否会有所改观。
为了防止文章篇幅过于冗长，后面我们不再放全量代码，只放增量代码。
第二个示例，绑定修改元素属性
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>var app2 = new Vue({
el: '#app-2',
data: { message: '页面加载于 ' + new Date().toLocaleString()}
})第二个示例是演示vue中的指令：v-bind attribute 用于绑定元素中的属性，代码中我们绑定了app-2下面的span元素的title属性。
我们再来看看jquery版本的示例对比一下：
与jquery版本示例对比
<div id="app2">
<span>
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>$("#app2 span").mouseover(function(){
$("#app2 span").attr('title','页面加载于 ' + new Date().toLocaleString());
});到这一段，jquery涉及到了选择器和事件监听，vue的指令依然没有表现出特别的优势，看起来两者似乎有点旗鼓相当。让我们继续比下去，看看后面还会不会有所变化。
第三个示例：切换元素显示
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})在控制台中app3.seen = false就可以隐藏元素
与jquery版本示例对比
<div id="app-3">
<p>现在你看到我了</p>
</div>$("#app3 p").show();调用$("#app3 p").hide();就可以隐藏元素
看到这里，似乎jquery给人感觉更简单直接，vue似乎没有体现出任何优势。按照这个节奏，vue不会要翻车了吧，为vue捏把汗，让我们继续下一个示例。
第四个示例：v-for 指令渲染列表
v-for 指令可以绑定数组的数据来渲染一个项目列表
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})在控制台里，输入app4.todos.push({ text: '新项目' })，会发现多了一个li列表
与jquery版本示例对比
<div id="app-4">
<ol>
</ol>
</div>var todos= [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
for(i in todos){
let li="<li>"+todos[i].text+"</li>";
$("#app-4 ol").append(li);
}到这里，终于发现vue动态生成dom确实更简洁了，明显比jquery生成dom节点更简单。vue的虚拟dom操作的特性优势有些凸显出来了，但是不知道下面事件监听vue能否稳住局面。
第五个示例：绑定鼠标事件
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})与jquery版本示例对比
<div id="app-5">
<p></p>
<button>反转消息</button>
</div>var app5=$("#app-5 p");
app5.text("hello jquery!");
$("#app-5 button").click(function(){
app5.text(app5.text().split('').reverse().join(''));
})到这里大家差不多看出来点什么了，二者复杂度其实差不多。jquery明显开始多次重复操作同一个dom，vue则只绑定一次，且没有对dom进行操作。可以初步得出结论就是对dom操作越多，vue的优势越大。
下面我们再来看看双向绑定：
第六个示例：双向绑定
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})与jquery版本示例对比
<div id="app-6">
<p></p>
<input>
</div>$("#app-6 input").val("hello world!");
$("#app-6 p").text($("#app-6 input").val());
$("#app-6 input").keyup(function(){
$("#app-6 p").text($("#app-6 input").val());
});到这里，我想大家应该比第五个示例看的更加明白了，vue几乎没增加什么代码，jqeury在疯狂的操作dom。应对对于这种稍微麻烦点的dom双向绑定操作，vue比jqeury方式要轻松得多。
结论
对于多个dom操作和各种双向绑定等复杂dom操作来说，显然vue更胜一筹，代码更加简洁，对于简单代码，vue也不会显得过于冗余。而对于页面动效比较简单的页面，jquery显然优势更明显。
