v-bind：css =“ false”到底是做什么的，它在哪里记录？

Question

JavaScript Hooks的Vue文档提到：

  

为纯JavaScript转换显式添加v-bind:css="false"是一个好主意，以便Vue可以跳过CSS检测。这也可以防止CSS规则意外干扰过渡。

1. 在某个地方有v-bind:css的官方文档吗？ （注意-我知道v-bind directive的作用）
2. “ CSS检测”的确切含义是什么？在源代码中的位置是什么？
3. 什么是CSS规则会干扰过渡的示例，从技术上讲，该指令如何防止这种情况发生？

我唯一看到的其他地方是在vue/test/unit/features/transition/transition.spec.js的Vue源代码测试中，但据我所知，该测试并没有真正检查与CSS相关的任何内容。

Answer 1

1。有官方文档吗？

除了您已经找到的以外，我还没有找到：css的任何官方文档。

2。它是做什么的？

本人对此进行调查，“ CSS检测”可能是错误的短语，IMO应该读取以下内容：

为纯JavaScript转换明确添加v-bind：css =“ false”是一个好主意，以便Vue可以跳过应用转换类。这也可以防止CSS规则意外干扰过渡。

：css属性实际上非常简单。本质上，它打开/关闭将 v-enter，v-enter-to，v-leave，v-leave-to 类添加到要转换的元素。我们可以在transition-util.js的Vue来源中看到这一点：

transition-util.js

if (def.css !== false) {
  extend(res, autoCssTransition(def.name || 'v'))
}

...

const autoCssTransition: (name: string) => Object = cached(name => {
  return {
    enterClass: `${name}-enter`,
    enterToClass: `${name}-enter-to`,
    enterActiveClass: `${name}-enter-active`,
    leaveClass: `${name}-leave`,
    leaveToClass: `${name}-leave-to`,
    leaveActiveClass: `${name}-leave-active`
  }
})

因此，如果 css 属性未设置为false并且转换具有 name 属性，则此代码将应用${name}-enter，否则将应用{{ 1}}。

3。干扰示例

我个人在过渡组上使用自定义钩子来应用自定义类时遇到了干扰。例如：

v-enter

<transition-group @enter="enterHook">...

在没有methods: { enterHook (el) { el.classList.add('custom-enter-class') } } 属性的情况下，以编程方式添加/删除类时出现了奇怪而不一致的行为。该属性使事情变得更加健壮。