浅谈Vue入门需掌握的知识

vue作为一款目前最流行的前端框架之一，是许多前端开发工程师的不二选择。最近我在前端岗位上也运用vue实现了几款产品，那么今天来分享一下vue是什么，以及我对vue的见解。

一、定义

vue是一套用于构建用户界面的渐进式javascript框架

与传统js和jquery框架不同，vue的渐进式框架表示开发者可以由简单组件写起，渐渐搭建出一个复杂的前端平台。
形成vue渐进式框架的核心概念为：组件化，mvvm，响应式，和生命周期，下面会一个个详细介绍。

二、为什么要用vue？

1. 组件化

vue将组成一个页面的html，css和js合并到一个组件中，可以被其他组件或页面引入而重复利用。通常每个.vue文件作为一个组件导出，组件可以作为基础组件（如按钮）或一个页面（如登录页面）。组件化很好的将一个庞大复杂的前端工程拆分为一个个组件，重复利用的性质也大大提高了开发的效率。

2. mvvm 数据双向绑定

mvvm模式（全称为model-view-viewmodel）为vue实现数据双向绑定。在mvvm中，view为视图层，viewmodel为业务逻辑层，model为数据层。

什么是数据双向绑定呢？当用户使view变化时（如填写表单），变化会自动同步到viewmodel处理相应逻辑，并将变化更新到model数据库。反之，若服务端数据变化（如股价波动），变化会自动同步到viewmodel处理相应逻辑，并将变化同步到view展现给用户。

在用vue之前，我完成html和js之间的交互需要使用大量的dom操作来实现动态加载。mvvm的数据双向绑定减少了dom操作，更高效地实现了视图和数据的交互。同时，mvvm使界面、交互和数据层分离，便于设计人员负责设计界面，后端开发人员提供数据接口，而前端开发人员专注于业务交互逻辑的实现。

3. 响应式 虚拟dom

对于dom来说，当html的一个元素（如div）需要响应数据更改时，会刷新整个页面，导致效率堪忧。对于虚拟dom，浏览器会将html文件转换为js文件并复制一个额外使用（虚拟）。对于任何更改，虚拟dom都将复制的js与原始js进行比较，只重新加载更改的部分，局部修改到真实dom上。

在vue中，每个绑定data属性的组件都有一个watcher检测data属性的变化。一旦检测到改变，则重新渲染该组件，这就是响应式。

4. 生命周期

最后，每个vue组件都有生命周期，过程为创建 -> 挂载 -> 更新 -> 销毁。开发者可以通过钩子函数（如mounted）在组件生命周期中的不同时刻进行操作。下面是一张vue生命周期的完整图解。

三、vue的优缺点

讲完vue的几个核心概念后，总结一下使用vue框架给前端开发带来的优缺点：

优点

1. 轻量级

vue作为一款轻量级前端框架，大小只有18–21kb，工程搭建简单，只需要几行命令符。因为vue使用的主体语言为js，开发者可以灵活地将其他框架（如react和angular）的项目迁移到vue，具有很高的集成能力。vue提供的router路由可以便捷地搭建一个多界面应用。

2. 高性能

虚拟dom和响应式避免了不必要的全局重新渲染，提升了用户体验，使用户操作更加流畅。

3. 好上手

与面向对象编程性质类似，组件化更符合人类思维。打个比方，我们在设计网页时，通常会把一个界面分成一块一块的、用于某功能的特定样式模块。vue的组件化使前端开发更加容易理解，同时mvvm可以更便捷地实现交互，对新手十分友好。

4. 插件化

由于vue框架的流行性，目前有许多基于vue的npm扩展包和开发工具（如vuex）。vue可以在一个文件下统一管理所有外部插件的全局使用。

5. 便于测试

组件化利于开发者对于单一组件进行测试，很少发生在整个页面下找不到是哪个地方报错的情况。

缺点

1. 生态环境不够完善

虽然vue五年以来的发展寻索，生态环境不如react和angular规范。vue开发的讨论社区较小。

2. 国外市场小

vue是由中国尤大神开发的，主要有阿里巴巴、饿了么等国内大公司作为主流框架，国外大部分使用react和angular。

以上就是浅谈vue简易入门知识的详细内容，更多关于vue入门的资料请关注其它相关文章！