Изменение жестко запрограммированного реквизита на импортированном компоненте не вызывает HMR - PullRequest
Новая
       10

Изменение жестко запрограммированного реквизита на импортированном компоненте не вызывает HMR

0 голосов
/ 02 мая 2020

Я играл с vue -следующим (версия 3 из vuejs) и столкнулся с проблемой с HMR. Вот краткое изложение моей среды и проблемы, но:

TL; DR; - Жестко закодированные реквизиты не запускают HMR на импортированном компоненте

Некоторая важная информация об окружающей среде. Любые файлы, которые я не включил, являются значениями по умолчанию из предварительного просмотра vue веб-пакета: 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 с настроенная высота подъема.

Результат Горячая замена модуля не срабатывает при изменении, но компонент обновляется при перезагрузке; как и следовало ожидать.

Это, кажется, проблема только с жестко закодированной опорой. Когда я использую const elevation = ref(0);, он работает нормально.

Скриншоты Rendered image

...