0

我一直在玩 vue-next（vuejs 的第 3 版）并遇到了 HMR 的问题。这是我的环境和问题的概要，但是：

TL;博士; - 硬编码的道具不会在导入的组件上触发 HMR

关于环境的一些基本信息。我没有包含的任何文件都是 vue-next webpack 预览中的默认文件：https ://github.com/vuejs/vue-next-webpack-preview

包.json

{
  "private": true,
  "scripts": {
    "serve": "webpack-dev-server",
    "build": "webpack --env.prod"
  },
  "dependencies": {
    "vue": "^3.0.0-beta.6"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.0-beta.4",
    "css-loader": "^3.5.3",
    "file-loader": "^6.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "ts-loader": "^7.0.2",
    "typescript": "^3.8.3",
    "url-loader": "^4.1.0",
    "vue-loader": "^16.0.0-alpha.3",
    "webpack": "^4.43.0",
    "webpack-bundle-analyzer": "^3.7.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

重现步骤

  • 创建一个新的“组件”，我们称之为 Surface。它接受一个高程道具，该道具将用于计算名为 的 CSS 变量--elevation。
<script lang="ts">
import { computed, defineComponent } from "vue";

export default defineComponent({
  name: "Surface",
  props: {
    elevation: {
      type: Number as () => 0 | 1 | 2 | 3 | 4,
      default: 0
    }
  },
  setup(props) {
    console.log(props.elevation);
    const cssProps = computed(() => ({
      "--elevation": `${props.elevation}em`
    }));

    return { cssProps };
  }
});
</script>

<template>
  <div :style="cssProps>Hello, world!{{ elevation }}</div>
</template>

<style scoped>
div {
  border: 1px solid red;
  display: inline-block;
  padding: var(--elevation);
}
</style>
  • Surface在另一个.vue文件中使用组件：
<script lang="ts">
import { defineComponent } from "vue";

import { Surface } from "./Surface.vue";

export default defineComponent({
  components: { Surface },
  setup() {

    return { };
  }
});

<template>
  <div :style="cssProps">Hello, world!{{ elevation }}</div>
</template>

<style scoped>
:root {
  --elevation: 0rem;
}

div {
  border: 1px solid red;
  display: inline-block;
  padding: var(--elevation);
}
</style>

</script>

<template>
  <Surface :elevation="3" />
</template>
  • 修改海拔道具。

预期Surface的热模块更换触发并使用调整后的高度道具 重新渲染组件。

结果 Hot Module Replacement 不会在更改时触发，但组件会在重新加载时更新；正如所料。

这似乎只是硬编码道具的问题。当我使用它时const elevation = ref(0);，它工作正常。

渲染的 截图图片

4

0 回答 0