修改v-if导致整个组件被重新渲染?

Question

在使用vue-sfc-rollup打包组件的时候发现了这个问题, 只要是有任何的元素使用了v-if或v-show控制显示都会导致整个组件被重新渲染, 用来计算style的函数会被调用,实在是找不到原因

<template>
  <div
    key="123"
    class="test"
  >
    {{ Math.random() }}
    <p v-show="visible" />
    <button @click="visible = !visible">
          toggle
    </button>
  </div>
</template>

这样写也会导致模板里的值变化

Answer 1

你不使用v-if或v-show他也会重新渲染，整个template是作为render-watcher存在的，它所依赖的变量发生改变都会导致他重新渲染，所以template中尽量不要写不受控的数据