Vue.js中文文档学习记录

1.计算属性的优势

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

<div id="example">
   <p>Original message: "{{ message }}"</p>
   <p>Computed reversed message: "{{ reversedMessage }}"</p> 
</div>
var vm = new Vue({ 
     el: '#example', 
     data: { message: 'Hello' }, 
     computed: { // 计算属性的
       getter reversedMessage: function () { 
       // `this` 指向 vm 实例 
       return this.message.split('').reverse().join('')
       }
      } 
    })

<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中 
methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } }

2.key的作用（v-if解决不了的时候可以尝试key）

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。如果不要复用它们”。只需添加一个具有唯一值的 key，v-if虽然会卸载挂载，但是会复用，比如input框里面的内容并不会变。 即可,例如v-if添加key，每次都会被重新渲染

3. v-if vs v-show

v-if 是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。(vue2)不推荐同时使用

在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。(不一定按照数据定义的数据去输出)hhhhhhhhh

4.替换数组

你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

example1.items = example1.items.filter(function (item) { 
    return item.message.match(/Foo/) 
   })

5.单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定， 如果要使用并且改变传入的prop值，最好定义一个计算属性

props: ['size'], 
computed: {
  normalizedSize: function () { 
     return this.size.trim().toLowerCase()
   }
}

6.ref

当 ref 和 v-for 一起使用的时候，你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组。

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

7.render函数