Vue.js如何实现条件v-bind绑定 避免v-if导致的重渲染性能问题

完全可以在不重复编写元素、不触发DOM重渲染的前提下实现条件式的属性绑定，不需要用v-if/v-else重复写元素，常用实现方式有两种：

• 单属性条件绑定：给绑定值传入条件判断，不满足绑定时返回undefined
  Vue的v-bind逻辑默认会对值为undefined/null的绑定做移除处理，不会把对应的属性/prop挂载到元素/组件上，也不会触发元素销毁重建。
  代码实现如下：

  <div class="sample">
     <div class="some-stuff" :handle="condition ? '.handle' : undefined" />
  </div>
  

  注意不要用false或者空字符串作为不生效的返回值，部分自定义组件prop、原生布尔属性会把这两个值识别为合法绑定值，无法达到移除绑定的效果，undefined是兼容性最好的选择。

• 多属性条件绑定：给v-bind直接传入动态对象
  如果需要同时控制多个属性的绑定生效逻辑，可以直接给无参数的v-bind传动态对象，对象内仅写入需要生效的属性键值对即可，不满足条件时传空对象。
  代码实现如下：

  <div class="sample">
     <div 
       class="some-stuff" 
       v-bind="condition ? { handle: '.handle' } : {}" 
     />
  </div>
  

以上两种方案都只会更新元素的绑定属性，不会销毁重建.some-stuff元素，完全不会触发元素内部内容的重渲染，性能开销远低于v-if/v-else的重复元素写法。

内容的提问来源于stack exchange，提问作者Yassine KAROUI