转载

Vue 注意知识点(持续更新)

Vue.js 使用了 基于HTML的模版语法 ，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上， Vue 将模板编译成 虚拟DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
Mustache里面只能是JS表达式，否则不会生效。
指令的职责就是 当其表达式的值改变时相应地将某些行为应用到 DOM 上 。
过滤器设计目的就是 用于文本转换 ，为了在其他指令中实现更复杂的数据变换，你应该使用 计算属性 。

计算属性

计算属性方法在组件 beforeMount 之后， Mounted 之前都会执行一遍。
计算属性方法可以没有返回值。但是该属性使用，即在模板中使用了，否则不起任何作用。
不经过计算属性，我们可以在 method 中定义一个相同的函数来替代它。对于最终的结果，两种方式确实是 相同的 。然而，不同的是计算属性是基于它的 依赖缓存 。 计算属性只有在它的相关依赖发生改变时才会重新取值 。这就意味着只要message没有发生改变，多次访问reversedMessage（computed内的一个方法）计算属性会立即返回之前的计算结果，而不必再次执行函数。
计算属性是 依赖缓存 的；而methods是没有缓存的，每次都执行一遍。
计算属性默认只有getter，不过在需要时你也可以提供一个 setter。参考官方实例： https://cn.vuejs.org/v2/guide/computed.html#计算-setter
当你想要在数据变化响应时，执行异步操作或开销较大的操作，water方法（或者 vm.$watch API）是很有用的。

不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display 。
一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。
vue尝试尽可能高效的渲染元素，通常会复用已有元素而不是从头开始渲染。但是条件渲染的时候，有时需要重新渲染而不是服用已有元素，所以可以通过设置唯一的key来实现元素不复用。参考官方例子： https://cn.vuejs.org/v2/guide/conditional.html#使用-key-控制元素的可重用

在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。
v-for 也可以取整数。在这种情况下，它将重复多次模板。
在用 v-for 渲染组件的时候，不能自动传递数据到组件里，因为组件有自己独立的作用域。为了传递迭代数据到组件里，我们要用 props。不自动注入 item 到组件里的原因是，因为这使得组件会紧密耦合到 v-for 如何运作。

在 Vue 里，一个组件实质上是一个拥有预定义选项的一个 Vue 实例。
使用组件时，大多数选项可以被传入到Vue构造器中，有一个例外： data 必须是函数 。原因的话，因为组件可能被多次调用，当data为普通对象时，data内的数据会被共享，当为函数的时候，则每个组件生成的为独立data作用域。
在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。
注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。
Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似，但是$on 和 $emit 不是addEventListener 和 dispatchEvent 的别名。
$refs 只在组件渲染完成后才填充，并且它是 非响应式 的。它仅仅作为一个直接访问子组件的应急方案——应当避免在模版或计算属性中使用 $refs 。