vue2.0读书笔记2-进阶
一、深入响应式原理
二、过渡效果
三、过渡状态
四、Render函数
五、自定义指令
六、混合
七、插件
八、单文件组件
九、生产环境
十、路由 vue-router： http://router.vuejs.org/
十一、状态管理vuex 集成到了vue-devtools当中
十二、单元测试（断言等，使用karma进行自动化测试）
十三、服务端渲染
一、深入响应式原理
1.1、如何追踪变化
通过watcher把组件渲染过程中的依赖纪录下来，当依赖项的setter被调用时，watcher重新计算，组件更新。setter被调用，是由于使用了object.defineProperty把属性转为了getter/setter，从而依赖项被操作时，相应转为调用getter/setter。
1.2、变化检测问题
Vue 不能检测到对象属性的添加或删除，由于实例时有转化过程，此时data的对象才能让它响应。新增响应式属性，需使用Vue.set(object, key, value)
1.3、声明响应式属性
1.4、异步更新队列
Vue 异步执行 DOM 更新，在同一事件中使用缓存去重，在下次的事件循环“tick”中，vue刷新队列并执行实际操作。在内部尝试对异步队列使用原生的
Promise.then 和 MutationObserver，如果执行环境不支持，会采用setTimeout(fn, 0) 代替。在数据变化之后，立即使用Vue.nextTick(callback)回调。二、过渡效果
过渡的几个酷炫库：
https://unpkg.com/tween.js //生成平滑的动画效果
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库，如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
2.1、单元素/组件的过渡
在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡
- 条件渲染 （使用
v-if） - 条件展示 （使用
v-show） - 动态组件
- 组件根节点
运作：
元素封装成过渡组件之后，在遇到插入或删除时，Vue 将自动嗅探目标元素是否有 CSS 过渡或动画，并在合适时添加/删除 CSS 类名。如果过渡组件设置了过渡的 JavaScript 钩子函数，会在相应的阶段调用钩子函数。如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作（插入/删除）在下一帧中立即执行。
a、过渡的css类名
v-enter: 定义进入过渡的开始状态。
v-enter-active: 定义进入过渡的结束状态。
v-leave: 定义离开过渡的开始状态
v-leave-active: 定义离开过渡的结束状态。
b、css动画
CSS 动画用法同 CSS 过渡，区别是在动画中
v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。 .bounce-enter-active {animation: bounce-in .5s;}
.bounce-leave-active {animation: bounce-out .5s;}
c、自定义过渡类名
如何了解动画是否结束？hity
d、同时使用animation与transition时，需要设置一个type特性，识别哪个动效时间更长。
e、javascript钩子：enter、leave分别有四个钩子
tips: 使用 JavaScript 过渡的元素时添加
v-bind:css="false"，Vue 会跳过 CSS 的检测。 2.2、初始渲染的过渡：appear
2.3、多个元素的过渡（一次渲染多个节点）
tips：当有相同标签名的元素切换时，需要通过
key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。 过渡模式in-out, out-in
2.4、多个组件的过渡
<transition name="component-fade" mode="out-in">
<component v-bind:is="view"></component>
</transition>
元素需指定唯一的key。
<transition-group name="list" tag="p">
<span v-for="item in items" v-bind:key="item" class="list-item">
{{ item }}
</span>
</transition-group>
a、列表位移过渡 v-move 可实现很厉害的效果（使用flip过渡方案）
b、列表的渐进过渡 通过data与javascript通信，实现列表的渐进过渡。
2.6、可复用的过渡
过渡可以通过 Vue 的组件系统实现复用。
2.7、动态过渡
在 Vue 中即使是过渡也是数据驱动的。使用v-bind来实现动态绑定。
三、过渡状态
3.1、状态动画与watcher
通过watcher来监听任何数值属性的数值更新，在watcher中增加动画。
3.2、动态状态转换
就像 Vue 的过渡组件一样，数据背后状态转换会实时更新，这对于原型设计十分有用。
3.3、通过组件组织过渡
四、Render函数
4.1、基础
提供javascript的完全编程能力，比template更接近编译器。可使得html代码更佳简洁～
4.2、createElement参数创建
约束：vnodes必须唯一
4.3、使用javascript代替模版功能
无论什么都可以使用原生的 JavaScript 来实现，Vue 的 render 函数不会提供专用的 API。
v-model 无法使用。
4.4、jsx
4.5、函数化组件
4.6、模版编译
五、自定义指令
简介：在 Vue2.0 里面，代码复用的主要形式和抽象是组件——然而，有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。
分为全局和局部注册。
5.1、钩子函数
指令定义函数提供了几个钩子函数：
bind: 只调用一次，指令第一次绑定到元素时调用。
inserted: 被绑定元素插入父节点时调用。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次， 指令与元素解绑时调用。
5.2、钩子函数参数
el: 指令所绑定的元素，可以用来直接操作 DOM 。
binding: 一个对象，包含以下属性：
name: 指令名，不包括 v- 前缀。
value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。
expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
vnode: Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
5.3、函数简写
5.4、对象字面量
<div v-demo="{ color: 'white', text: 'hello!' }"></div>
六、混合
混合是一种灵活的分布式复用 Vue 组件的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。
6.1、选项合并
当组件和混合对象含有同名选项时，这些选项将以恰当的方式混合。另外，混合对象的 钩子将在组件自身钩子 之前 调用 。
值为对象的选项，将被混合为同一个对象。 两个对象键名冲突时，取组件对象的键值对。
6.2、全局混合
注意使用！ 一旦使用全局混合对象，将会影响到 所有 之后创建的 Vue 实例。
6.3、自定义选项混合策略
自定义选项将使用默认策略，即简单地覆盖已有值。
七、插件
添加全局方法或者属性，如: vue-element
添加全局资源：指令/过滤器/过渡等，如 vue-touch
通过全局 mixin方法添加一些组件选项，如: vuex
添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
一个库，提供自己的 API，同时提供上面提到的一个或多个功能，如 vue-router
Vue.js 的插件应当有一个公开方法
install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象: MyPlugin.install =function (Vue, options){};
a、使用插件vue.use
Vue.use(MyPlugin, {someOption:true})
awesome-vue 集合了来自社区贡献的数以千计的插件和库。
八、单文件组件
优点：* 完整语法高亮、* CommonJS 模块、* 组件化的 CSS
使用预处理器来构建简洁和功能更丰富的组件。
九、生产环境
9.1、删除警告
webpack的配置修改下，在生产环境能产生警告，线上环境无。
new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}})
9.2、跟踪运行时错误
9.3、提取css
十、路由 vue-router： http://router.vuejs.org/
十一、状态管理vuex 集成到了vue-devtools当中
十二、单元测试（断言等，使用karma进行自动化测试）
十三、服务端渲染
优势：seo优化；客户端的网络比较慢，可减少请求；老客户端，不支持vue；
可使用预渲染来实现seo的优化：prerender-spa-plugin可增加预渲染。
使用node脚本实现服务端渲染。
b、流式响应
c、组件缓存：
tips：不应该缓存组件包含子组件依赖全局状态（例如来自vuex的状态）。如果这么做，子组件（事实上是整个子树）也会被缓存。所以要特别注意带有slots片段或者子组件的情况。
