导航
导航
文章目录
  1. 为什么不用JQuery
  2. 响应式的数据绑定
  3. 组件化应用开发
  4. 虚拟DOM

到底什么是vue

2017.10.18 hieeyh vue

Vue真的是最近很火的一个框架，那么Vue到底是什么呢？官方的解释是，Vue是一套构建用户界面的渐进式框架，Vue的核心只关注视图层，和angular这种重量级的框架不同。Vue的目标是通过尽可能简单的api实现响应式的数据绑定和组合的视图组件。对于初学者来说，可能看了官方的解释也还是不太清楚Vue究竟是什么，那么就说说Vue主要用来干什么，这可以让大家从另一方面更好地理解Vue。Vue在搭建表单繁多且网页内容需要根据用户的操作进行修改的的网页版应用时，有很大用处。

为什么不用JQuery

我们知道JQuery主要是简化了我们直接用js操作DOM的过程，JQuery可以进行链式调用，当链很长的时候，代码阅读性就很差，而且JQuery选择器查找页面元素以及DOM操作也是有性能损失的。但是用Vue进行开发的话你就不会有这样的烦恼。这是因为Vue可以进行响应式的数据绑定，Vue是以数据进行驱动的。同时Vue还可以进行组件化的开发，让你的代码得到足够的复用，减少很多重复的工作。Vue2.0还引入了虚拟DOM，进一步优化性能。

响应式的数据绑定

Vue一个最明显的特性就是它的响应式的系统，数据模型就是一个简单的js对象，当你修改他们时，视图就会进行响应的更新，而不需要你自己手动的操作。

1
2
3
4
5
<!-- html代码如下 -->
<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
// js代码如下
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

上例中，点击逆转消息的按钮，会调用reverseMessage方法，在该方法中对message进行了一些操作，改变了message的值，此时视图也就会响应的改变，而不需要操作DOM来改变视图。
可以看出Vue中的一切都是数据进行驱动的，数据改变，视图就会进行相应的改变。而这在JQuery中是无法实现的。同时Vue中也可以进行双向的数据绑定，即视图的改变也会反映到数据上来，这主要表现在表单操作上。

组件化应用开发

组件系统是Vue的另一个重要的概念，我们可以用小型，独立和可复用的组件构建大型应用。Vue通常用来开发单页面应用，如果页面的交互和结构十分复杂，那么一个页面上就会有很多的模块要写，如果直接在一个页面上进行开发，那么代码量和工作量都非常庞大。进而Vue引入了组件，将一个单页面应用的各个模块拆分到一个个单独的组件中，这样各个组件就能各行其职，最后所有的组件组合起来就是我们一个完整的单页面应用。组件化另一个有优点是，组件可以进行复用，这样就能减少重复的代码，进一步优化性能。

虚拟DOM

虚拟DOM实际上是Vue2.0才引入的，是参考了React的思想。这些高大上的思想其实都是为了优化性能，虚拟DOM是什么呢？其实就是用js对象来模拟DOM树，当状态变化后，通常需要重新渲染DOM，我们知道DOM操作是十分损耗性能的，用一个js对象来模拟DOM，然后用diff算法来进行计算，可以算出具体是哪个元素或者组件需要重新渲染，然后再进行DOM操作。这样可以避免一些不必要的DOM操作，进一步提高性能。

在接触Vue，React，Angular这些听起来高大上的框架之前，可能会觉得无从下手，但是搞清楚了它们的思想和原理后，在进行开发就会简单很多。

本文总阅读量：次