描述bug

当在“文档”部分更改属性时，整个组件都会重绘。

重现

重现此行为的步骤：

1. git clone https://github.com/schoonc/test-storybook-vue-docs-render
2. npm i
3. npm run storybook
4. 更改“画布”部分中的属性。我们可以看到元素的颜色平滑地变化(storybook仅更改元素的类)。
5. 更改“文档”部分中的属性。我们看到元素的颜色立即发生变化(storybook完全重绘了元素)。

预期行为

组件不应完全重绘。

截图

代码片段

package.json中的依赖项：

"devDependencies": {
    "@babel/core": "^7.11.6",
    "@storybook/addon-actions": "^6.0.25",
    "@storybook/addon-essentials": "^6.0.25",
    "@storybook/addon-links": "^6.0.25",
    "@storybook/vue": "^6.0.25",
    "babel-loader": "^8.1.0",
    "react-is": "^16.13.1"
  },
  "dependencies": {
    "vue": "^2.6.12",
    "vue-loader": "^15.9.3",
    "vue-template-compiler": "^2.6.12"
  },

.storybook/main.js:

module.exports = {
  "stories": [
    "../stories/**/*.stories.js"
  ],
  "addons": [
    "@storybook/addon-essentials"
  ]
}

stories/testdiv.css:

.testdiv {
  background: blue;
  transition: all 1s;
}
.testdiv-red {
  background: red;
}

stories/Testdiv.stories.js:

import Testdiv from './Testdiv.vue';

export default {
  title: 'testdiv',
  component: Testdiv,
};

export const Default = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Testdiv },
  template: '<testdiv v-bind="$props" />',
})

stories/Testdiv.vue:

<template>
  <div class="testdiv" :class="{'testdiv-red': red}">TEST</div>
</template>

<script>
import './testdiv.css';

export default {
  name: 'testdiv',

  props: {
    red: Boolean
  },
};
</script>

系统

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (8) x64 AMD Ryzen 5 3550H with Radeon Vega Mobile Gfx
  Binaries:
    Node: 12.18.4 - /usr/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.6 - /usr/bin/npm
  Browsers:
    Chrome: 84.0.4147.125
    Firefox: 81.0

了解这种行为的原因会很有趣。如果从技术上讲这是合理的(例如，目前技术上难以实现),那么在文档中描述这种行为将是很酷的。