Vue 如何知道不同浏览器应该添加哪个前缀？

Question

喜欢

<template>
  <h1 :style={ filter: 'blur(1px)' }>My Template!!</h1>
</template>

我使用style和webkit从node_modules/Vue和node_modules/@Vue搜索源代码，但没有运气。

Vue 如何知道不同浏览器应该添加哪个前缀？太神奇了！！

https://vuejs.org/v2/guide/class-and-style.html#Auto-prefixing

Answer 1

我想我找到了答案。 代码在vue/src/platforms/web/runtime/modules/style.js第32行下

const vendorNames = ['Webkit', 'Moz', 'ms']

let emptyStyle
const normalize = cached(function (prop) {
  emptyStyle = emptyStyle || document.createElement('div').style
  prop = camelize(prop)
  if (prop !== 'filter' && (prop in emptyStyle)) {
    return prop
  }
  const capName = prop.charAt(0).toUpperCase() + prop.slice(1)
  for (let i = 0; i < vendorNames.length; i++) {
    const name = vendorNames[i] + capName
    if (name in emptyStyle) {
      return name
    }
  }
})

这里的emptyStyle 是来自浏览器的CSSStyleDeclaration。 Vue 会检查是否在 CSSStyleDeclaration 中带有前缀的每个属性。 如果是，那么将附加它并缓存它。 但是，看起来filter 属性在这里是一个例外。

大部分 CSS 我们将在 CSS 文件中编写，然后由 PostCSS 和 Autoprefixer 编译。考虑运行时，我猜上面的代码是最简单和最小的实现方式，但仍然有一些惊喜。