Vue--功能相近的指令如何区分？

图片来自网络

使用Vue已经很长时间了，发现了有些指令的功能有重合的部分。同一件事情两个指令都能完成，那该选择谁呢？他们各自的适用场景有哪些呢？今天和大家一起来梳理一下。

1.v-if / v-show

重合功能： 两个指令都可以控制元素的显示。

区别： v-if为false时不会生成元素，v-show则一直会把元素渲染出来，只是切换display属性。

去Vue官网查看v-if和v-show的定义，发现一句很精辟的话“v-if 指令将根据表达式值的真假来插入/移除元素。”。

适用场景： 如果元素的显示隐藏次数相对较少，比如根据用户的权限控制显示的内容，可以使用v-if。相反的，如果元素的显示隐藏状态会经常的切换，为了提升页面性能（虽然Vue已经很快了），应该使用v-show。

// 权限
<div v-if = "permission === admin"></div>
// 开关
<div v-show = "switch === open"></div>

2.computed / methods / watch

重合功能： 三个都能实现对变量的计算。
区别：

• computed是根据所依赖的变量的变化来实时计算的，依赖的任何一个变量发生变化都会重新计算。
  methods是方法需要主动触发才会进行计算。
  watch是根据监控变量的变化来进行计算的，只有监控的变量发生变化才会进行计算。

• computed会对计算的结果进行缓存，如果仅刷新页面的话，computed不会进行重新计算。
  methods / watch不会进行缓存，刷新页面后会重新执行方法。

• computed默认只有getter没有setter，只能获取数据不能设置数据。但是可以添加set属性。

• watch可以提供异步操作，比如在input中设置延迟操作。这在搜索操作时特别有用，避免每输入、删除一个字符就执行一次查询操作。

• watch要避免滥用，如果有可能请使用computed.