Vue.js 学习笔记之进阶篇

过渡 & 动画

1. Vue 提供了 transition 的封装组件，在某些情形下，可以给任何元素和组件添加进入/离开的过渡。
2. 常用的过渡都是使用 CSS 过渡，CSS 过渡会自动应用某些过渡的类名，在这些类名下写对应的过渡 CSS 效果，详见: 过渡的类名。
3. CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除，详见: CSS 动画。
4. 使用自定义的过渡类名，Vue 的过渡系统和其他第三方的 CSS 动画库 Animate.css 结合的非常好，不需要自己写各种动画效果，详见: 自定义过渡的类名。
5. 过渡同样可以使用 JS 实现，配合动画库 Velocity.js 有较好的效果，详见: JavaScript 钩子。
6. Vue 提供了过渡模式，使过渡有一个较好的效果，详见: 过渡模式。
7. 对于一个列表的过滤渲染，可以使用列表过渡，详见: 列表过渡。
8. 对于一些数据元素本身，Vue 提供了状态过渡，详见: 状态过渡。

可复用性 & 组合

1. 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能，一个混入对象可以包含任意组件选项，详见: 混入。
2. Vue 允许用户注册自定义指令，详见: 自定义指令。
3. 绝大多数情况下，使用模板是合适的，但是对于一些情况，可能需要使用渲染函数来实现，Vue 提供了这种功能，详见: 渲染函数 & JSX。
4. createElement 返回的告诉 Vue 页面上需要渲染什么样的节点，包括及其子节点的描述信息，我们把这样的节点描述为 虚拟节点(virtual node)，常简写为 VNode，虚拟 DOM 是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼，详见: 节点、树及虚拟 DOM。
5. 插件通常用来为 Vue 添加全局功能，插件的功能范围没有严格的限制，详见: 插件。
6. Vue 允许自定义过滤器，可被用于一些常见的文本格式化,过滤器可以用在两个地方：双花括号插值和 v-bind 表达式，详见: 过滤器。

工具

1. 开发中基本都是单文件组件，一个 Demo，详见: 单文件组件。
2. 关注点分离不等于文件类型分离。
3. Vue 测试工具，详见: 测试。
4. Vue 提供了 TypeScript 的支持，详见: TypeScript支持。
5. Vue 生产环境一般需要做一些特别的配置，以提高访问效率，详见: 生产环境部署。

规模化

1. 路由，对于大多数的单页面应用，都推荐使用官方支持的 Vue Router。
2. 状态管理，由于状态零散地分布在许多组件和组件之间的交互中，大型应用复杂度也经常逐渐增长，为了解决这个问题，Vue 提供 Vuex。
3. Vuex 是 Flux架构 的实现之一，Redux 是 React 生态中最流行的 Flux 实现。
4. 服务端渲染 可以解决 SPA 应用的 SEO 问题和首屏渲染慢的问题，知乎上的相关 讨论。
5. 永远不要将不可信任的内容（一般指用户提供的字符串）作为模板内容使用，其等价于执行任意的 JS 代码，易受到 XSS 攻击，如果使用服务端渲染，甚至可能导致服务器被攻破，为了避免此问题，应该确保 Vue 模板的内容始终是可信的且完全由自己掌控。
6. 如果需要展示用户提供的 HTML，可以使用 v-html，但要注意，永远不要认为用户提供的 HTML 是 100% 安全的，除非它是在一个 iframe 沙盒里或者应用中只有编写这些 HTML 的用户可以接触到它。除此之外，允许用户撰写其自己的 Vue 模板会带来类似的危险。
7. 注入 HTML、URL、CSS、JS 等安全相关知识，详见: 安全。

响应式原理

1. 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter，详见: 如何追踪变化。
2. 由于 JS 的限制，Vue 不能检测数组和对象的变化，尽管如此还是有一些办法来回避这些限制并保证它们的响应性，详见: 检测变化的注意事项。