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

Question

喜欢

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

我使用styleandwebkit从node_modules/Vueand搜索源代码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。CSSStyleDeclarationVue 会检查是否在 CSSStyleDeclaration 中带有前缀的每个属性。如果是，那么将附加它并缓存它。但是，这里的属性似乎filter是一个例外。

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