Vue学习笔记01--Vue的基本介绍

学习了一段时间的Vue，现在做一下总结。

先来看看官网上对Vue的介绍。

描述1：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

分析1：这里的关键词是——渐进式是指可以由浅入深、由简单到复杂的方式去使用。这不是什么独一无二的特点，很多框架都是这样使用的。

描述2：官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧！之前有其它框架的使用经验会有帮助，但这不是必需的。

分析2：中级知识是一个比较模糊的描述，怎么判断自己是否已经具备了中级知识呢？我觉得有1年以上的实际前端开发经验，勉强可以算作具备了中级知识。当然，每个人的学习能力不同，也许有些聪明的小伙伴学习了一个星期的基础知识就达到了中级的水平。

要想使用Vue完成实际的开发，除了需要具备HTML、CSS和JavaScript的知识，还需要掌握Node.JS、ES6+语法、WebPack，以及Vue的“全家桶”中的：Vue-Cli、VueRouter、Vuex等组件，还有Element UI或者Ant Design Vue等UI组件库。因此，Vue这一套框架的学习成本还是比较高的。

描述3：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

分析3：见如下代码

1 <div id="app">
2   {{ message }}
3 </div>

1 var app = new Vue({
2   el: '#app',
3   data: {
4     message: 'Hello Vue!'
5   }
6 })

模板语法，指得是上面的HTML代码中的，“双大括号”的写法。

声明式，指得是下面JS代码中的，向Vue()中传入的对象。在此例子中，这个对象包含el属性和data属性。

描述4：我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。

分析4：通过引入Vue，将JS代码中的对象与HTML中的DOM元素进行了“绑定”。用户如果需要修改页面上元素的内容，就不用再编写下面这样的代码了。

1 //使用js获取页面中的DOM元素
2 var myDiv = document.getElementById('app');
3 myDiv.innerHTML = '修改后的值'
4 
5 //使用jQuery获取页面中的DOM元素
6 var myDiv2 = $("#div2")
7 myDiv2.html('修改后的值')

通过修改JS代码中的Vue实例对象app中的值，就可以修改页面元素的现实。如下面的方式：

app.message = '修改后的值'

小结：Vue的最主要功能就是简化DOM操作，但为了获得这个好处也要付出很多的代价。

首先就是学习成本很高，而且随着版本的变化，可能需要持续的跟进学习。如果版本变化幅度比较大，那之前学习的知识就会迅速失效。Vue3使用TypeScript重新编写，是否会走AngularJS的老路，因为版本变化太大而丢失市场，现在还不明朗。

其次就是代码封装过多，使用框架就要按照框架规定的方式来编写代码，框架把底层的一些过程“隐藏”了起来，开发人员就丧失了对底层细节精确操控的能力。如果框架中有Bug，那开发人员也很难发现和解决。

总之，Vue可以简化一定的编码，理论上可以提高开发效率，使开发人员专注于业务。但需要开发人员具备比较好的基础，并且需要开发人员付出大量的时间来学习。如果准备不足，可能在处理复杂问题时引入难以解决的Bug。不但不能减少工作量，反而要不断加班解决框架特有的问题，还会影响产品的质量和交付速度，最终影响企业的效益。因此，需要谨慎使用，尤其是最新版本。