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://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js

　　https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js       

　　https://unpkg.com/animate.css@3.5.1/animate.min.css

　　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>

 

　2.5、列表过渡（v-for）使用transition-group

　　元素需指定唯一的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脚本实现服务端渲染。

a、通过Express Web服务器实现简单的服务端渲染

    b、流式响应

    c、组件缓存：        

　tips：不应该缓存组件包含子组件依赖全局状态（例如来自vuex的状态）。如果这么做，子组件（事实上是整个子树）也会被缓存。所以要特别注意带有slots片段或者子组件的情况。