什么是Vue？

一、什么是Vue.js？
Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。
看完官方的解释，我只想说……什么是渐进式框架？什么叫自底向上增量开发？什么是视图层？什么是单文件组件？其他框架是哪些框架？难道我是一个假前端？？？
二、Vue.js到底是什么？
用自己的话总结了一下，Vue.js是用来解决频繁的页面交互操作的一种JS框架。像知乎，segmentfault这种偏功能型的网页非常适合用Vue.js。
一个前端页面，基本由HTML+CSS+JavaScript组成。HTML是页面骨架，CSS是样式表，JavaScript允许用户进行简单的页面交互操作，但是原生JS写起来非常麻烦，往往会出现很多重复的代码，所以后来出现了jQuery，jQuery的出现就是为了简化JS操作的，代码越写越少，但是用户体验要求越来越严格，一些偏功能型的网站会频繁进行页面交互操作，允许用户删改一些信息，jQuery也能满足这些操作，但jQuery专注于DOM操作，步骤一般为：获取DOM元素–> 给DOM元素赋值+加事件–>插入DOM元素。其中DOM元素赋值和加事件又需要获取DOM元素和给DOM元素赋值，这会使代码量增加。而且频繁的操作DOM节点对浏览器非常不友好，容易造成浏览器性能问题。
所以出现了Vue.js。
Vue专注于数据：用户只需要关注DOM元素值对应绑定的数据，每次DOM需要修改只需要去修改数据就可以了。
三、Vue和响应式
这里所说的响应式不是@media 媒体查询中的响应式布局，而是说Vue.js会自动响应数据的变化情况，它会绑定用户指定的ＤＯＭ节点和数据，被绑定的一方发生变化，另一方也会随之改变。
简单举个例子：将下面的代码保存为ＨＴＭＬ文档（后缀为．ｈｔｍｌ的文件），在浏览器中打开，大概就能体验绑定的效果了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js测试</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" name="" value="" placeholder="在这里输入文字，下面会跟着变化" v-model="message">
        <hr>
        <p>{{ message }}</p>
    </div>
    <script type="text/javascript">
        var app = new Vue({
          el: '#app',
          data: {
            message: 'Hello Vue!'
          }
        })
    </script>
</body>
</html>

四、Vue和组件化开发
首先要解释一下什么是单页应用：在应用整个使用流程里浏览器由始至终没有刷新，所有的数据交互由ajax异步加载完成，但是用户体验起来和app一样，有明确的页面区分，即所谓的web app。
可以说一个这样的单页应用，全靠JS撑着了，但是单页应用的页面交互和结构十分复杂，一个页面上就有许许多多的模块需要编写，而且往往一个模块的代码量和工作量就非常庞大。而且遇到以后的产品需求变更，修改起来也非常麻烦，生怕动了其中一个div之后，其他div跟着雪崩，整个页面全部乱套，或者由于JavaScript的事件冒泡机制，导致修改一些内层的DOM事件处理函数之后，出现各种莫名其妙的诡异BUG。
Vue.js所做的，就是把各种功能模块拆分，再封装成组件，我们只需要合理的调用就行了。

猜你喜欢