vue的分享知识

1、简介：

• Vue.js的作者为Evan You（尤雨溪），曾任职于Google Creative Lab。在发展前景上个人认为绝不输于Google的AngularJs。
• Vue.jss分为两种版本，1.0与2.0。从1.0升级到2.0变化还是比较大。建议直接从2.0直接入手。
• Vue.js读音类似于view，是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue.js 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
• Vue.js不仅仅是一个框架。因为它只聚焦视图层，是一个构建数据驱动的Web界面的库。

2、渐进式框架：

• 每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。
• 使用Vue可以在原有的系统架构上，把它当做一个组件（类似jQuery）使用。也可以使用webpack搭建Vue脚手架。
• 人们使用 Vue 还得益于，Vue 可以渐进增量采纳。这意味着，开发人员既可以在一开始将 Vue 作为项目的一小部分，也可以从一开始就大范围地使用 vue-cli，并按照 Vue.js 的方式实现一切。
• 它只是个轻量视图，只做了自己该做的事，没有做不该做的事，仅此而已。
• 个人通俗理解：Vue不需要一开始就一定要使用一套Vue的全家桶，可以先用Vue已有的框架里面，当做一个插件使用。等Vue的应用范围覆盖了整个系统，再迁移成Vue的脚手架。

3、Vue.js的特性如下：

• 轻量级的框架
• 双向数据绑定
• 指令
• 插件化

易用：

Vue虽然是一个比较轻量级的框架，简单轻量的同时还非常的人性化，其提供的API也是非常的容易理解，同时也提供了一些很便捷的指令和属性。

小巧：

说起小巧，那应该首先要关注下Vue的源码大小，Vue的成产版本（即min版）源码仅为72.9kb，官网称gzip压缩后只有25.11kb，相比Angular的144kb缩小了一半。小巧的一种好处就是可以让用户更自由的选择相应的解决方案，在配合其他库方面它给了用户更大的空间。

灵活：

如Vue的核心默认是不包含路由和 Ajax 功能，但是如果项目中需要路由和AJAX，可以直接使用Vue提供的官方库Vue-router及第三方插件vue-resource axios request，同时你也可以使用其他你想要使用的库或插件，如jQuery的AJAX等。

4、双向绑定

Vue的一个核心的概念就是双向绑定，在react，angular中都有双向绑定的概念。所谓的双向绑定就是，数据变化更新视图，视图变化更新数据。

blind.jpg

vue中常见的双向绑定方式v-model 指令
<input v-model="text" />
上例不过是一个语法糖，展开来是
<input :value="text"  @input="e => text = e.target.value"/>

双向绑定思路分析

• view更新data：可以通过事件监听即可，比如input标签监听 'input' 事件就可以实现。
• data更新view：通过Object.defineProperty( )对属性设置一个set函数，当数据改变了就会来触发这个函数，所以我们只要将一些需要更新的方法放在这里面就可以实现data更新view。
  view-data.jpg

5、Vue的另一个核心概念虚拟dom

为什么需要虚拟DOM

DOM是很慢的，其元素非常庞大，页面的性能问题鲜有由JS引起的，大部分都是由DOM操作引起的。如果对前端工作进行抽象的话，主要就是维护状态和更新视图；而更新视图和维护状态都需要DOM操作。其实近年来，前端的框架主要发展方向就是解放DOM操作的复杂性。在jQuery出现以前，我们直接操作DOM结构，这种方法复杂度高，兼容性也较差；有了jQuery强大的选择器以及高度封装的API，我们可以更方便的操作DOM。但是对于程序员来说，不可能仅仅满足于此。因此诞生了angular vue react等MVVM使用数据双向绑定，使得我们完全不需要操作dom，更了数据状态，视图就会自动更新。但是大量的事件绑定，使得在复杂的场景下执行会导致性能问题。因此就诞生了一种兼顾开发效率和执行效率的方案。引入虚拟dom。

什么是虚拟Dom

• 虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。
• 提供一种方便的工具，使得开发效率得到保证。
• 保证最小化的DOM操作，使得执行效率得到保证

理解虚拟Dom

• 用JS对象表示DOM结构。DOM很慢，而JS很快，用JS对象可以很容易地表示DOM节点。这样也就可以很方便地根据虚拟DOM树构建出真实的DOM树。

var vdom = velement('div', { 'id': 'container' }, [
    velement('h1', { style: 'color:red' }, ['simple virtual dom']),
    velement('p', ['hello world']),
    velement('ul', [velement('li', ['item #1']), velement('li', ['item #2'])]),
]);

上面的JS代码可以表示成这样的DOM结构

<div id="container">
    <h1 style="color:red">simple virtual dom</h1>
    <p>hello world</p>
    <ul>
        <li>item #1</li>
        <li>item #2</li>
    </ul>   
</div>

• 比较两棵虚拟DOM树的差异。在用JS对象表示DOM结构后，当页面状态发生变化而需要操作DOM时，我们可以先通过虚拟DOM计算出对真实DOM的最小修改量，然后再修改真实DOM结构。这里有一个算法，diff算法。可以高效的对比出两颗dom树的不同，记录差异。假设我们通过对比，记录出如下的节点发生了变化。

var patches = {
        1:{type:REPLACE,node:newNode}, //h1节点变成h5
        5:{type:REORDER,moves:changObj} //ul新增了子节点li
    }

• 对真实DOM进行最小化修改。通过虚拟DOM计算出两颗真实DOM树之间的差异后，我们就可以修改真实的DOM结构了。通过使用patches我们可以方便对真实DOM做最小化的修改。

6、对比

1.渲染性能

渲染用户界面的时候，dom的操作成本是最高的，那为了尽可能的减少对dom的操作，Vue和React都利用虚拟DOM来实现这一点，但Vue的Virtual DOM实现（一个陷阱的叉子）的权重要轻得多，因此比React的引入开销更少。Vue 和 React 也提供功能性组件，这些组件因为都是没有声明，没有实例化的，因此会花费更少的开销。当这些都用于关键性能的场景时，Vue 将会更快。

2.更新性能

在react中，当一个组件的状态发生变化时，它将会引起整个组件的子树都进行重新渲染，从这个组件的根部开始。那为了避免子组件不必要的重新渲染，您需要随时使用shouldComponentUpdate，并使用不可变的数据结构。 在Vue中，组件的依赖关系在它的渲染期间被自动跟踪，因此系统准确地知道哪些组件实际上需要重新渲染。这就意味着在更新方面,vue也是快于React

3.开发中

在开发中，Vue 每秒最高处理 10 帧，而 React 每秒最高处理不到 1 帧。这是由于 React 有大量的检查机制，这会让它提供许多有用的警告和错误提示信息。vue在实现这些检查时，也更加密切地关注了性能方面。

7、Vue生命周期：

alive.png
alive_code.png

• 通过示意图我们可以看到Vue的整个生命周期有很多钩子函数，会提供给我们在Vue生命周期不同的时刻，进行操作。
• 在beforeCreate和created钩子函数之间的生命周期。在这个生命周期之间，进行初始化事件，进行数据的观测，可以看到在created的时候数据已经和data属性进行绑定。（data中数据改变的同时，视图也会进行改变）。注意：此时还没有el选项。（el的意思就是根dom节点）
• created钩子函数和beforeMount间的生命周期。首先会判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期。
• beforeMount和mounted 钩子函数间的生命周期。可以看到此时是给vue实例对象添加$el成员，并且替换掉挂在的DOM元素。因为在之前console中打印的结果可以看到beforeMount之前el上还是undefined。如果挂载成功后，el就有了数据。
• 在mounted之前h1中还是通过{{message}}进行占位的，因为此时还有挂在到页面上，还是JavaScript中的虚拟DOM形式存在的。在mounted之后可以看到h1中的内容发生了变化。

mounted.png

• beforeUpdate钩子函数和updated钩子函数间的生命周期。当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。
• beforeDestroy和destroyed钩子函数间的生命周期。beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

8、基于Vue.js开发

vue的使用分为两种

• 一种是直接引入vue.js
• 另一种是搭配webpack的脚手架vue-cli（推荐）

1、直接导入vue.js

<!--下载vue.js包，本地导入-->
<script src="./vue.min.js" type="text/javascript" charset="utf-8"></script>

<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2、搭建webpack脚手架

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm run dev

9、常用第三方类库

vuex

vuex官方文档

使用vuex为了解决界面上通用的数据可以在每个页面，子页面都能很方便，快速直接使用。可以快速实现双向绑定。

UI界面框架

• 饿了么：pc框架 mobile框架
• 某位程序员收集的vue前端框架

网络请求：

axios request

10、SSR服务端渲染：

服务端渲染实现原理机制：在服务端拿数据进行解析渲染，直接生成html片段返回给前端。然后前端可以通过解析后端返回的html片段到前端页面，由于服务端渲染前端页面，必将会给服务器增加压力。关于vue的ssr渲染，个人感觉是就是一个空间换时间的操作。

为什么要使用ssr

vue或react框架获取资源流程

• 1、浏览器加载所有资源(html,css,js,img...)
• 2.cdn
• 3.返回资源
• 4.vue请求server获取业务数据
• 5.返回数据渲染成html片段
• 6.css渲染片段成一个网页
• 7、展示到用户终端

没错这里面最耗时的时间是4，5这两步骤，h5请求serverapi的过程本身除了服务器的限制，还有用户网络，宽带等等诸多限制，并且当页面逻辑过多，数据过于繁琐的情况下，我们的vue在client端渲染也会成为性能瓶颈。

SSR获取资源流程

• 1、浏览器加载所有资源(html,css,js,img...)
• 2.cdn
• 3.返回资源
• 4.css渲染片段成一个网页
• 5、展示到用户终端

11、参考资料：

vue官网

个人觉得，官方文档覆盖了整个Vue.js开发的方方面面。从其他地方找资料也基本上是从官网上面做延伸，学习Vue.js最好的地方就是官方文档。

12、实际项目中使用vue的好处

• 项目大小有60%的体积减少。
• 增加预约服务，不需要直接操作html页面，只需要在配置把数据进行修改。
• html页面的代码量明显减少，流程看起来清晰。利于以后的项目交接。
• 通用数据不需要每个js都进行定义，在vue中可以把通用的方法（授权，定位等）放到vuex里面。
• 通过路由可以实现页面的keep-alive。比如首页进入详情页，再返回首页，不需要刷新首页页面。
• 引入第三方工具通过npm install。在package.json中方便管理插件。 logo.png