看了vue文档之后。。。。

Posted 2021-01-05 endymion

• 对于任何复杂逻辑，你都应当使用计算属性

• html中的双花之内的值不一定来自data：{}，还有可能来自computed：{}

• 原数据改变，被绑定的计算属性也会改变

• 可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。

• v-bind:class 指令也可以与普通的 class 属性共存
  绑定的数据对象class不必内联定义在模板里

• Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可：复用！复用！

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

• 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

• 在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。

• 可以用 v-for 通过一个对象的属性来迭代，得到每个属性的值。第二个的参数做为键名，第三个参数为索引。

• 建议尽可能在使用 v-for 时提供 key。

• 当在组件中使用 v-for 时，key 现在是必须的。

• vue不能检测到的数组变化：

1. 直接利用索引修改某项；
2. 修改数组长度

如何能让vue检测到这种变化呢？

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
vm.$set(vm.items, indexOfItem, newValue)

 vm.items.splice(newLength)

• 使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性：

vm.$set(vm.userProfile, ‘age‘, 27)
Vue.set(vm.userProfile, ‘age‘, 27)

• 当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。
• 有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法。
• v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 javascript 在组件的 data 选项中声明初始值。
• 在文本区域插值 () 并不会生效，应用 v-model 来代替。
• v-model配select，第一个option要设为disabled value=""
• 使用自定义组件前，先new Vue一下根标签作为根实例。
• 一个组件的 data 选项必须是一个函数而不是对象
• 全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。