小编ux.*_*eer的帖子

虽然Vue Composition API RFC 参考站点有很多watch模块的高级使用场景，但没有关于如何观看组件 props 的示例？

在Vue Composition API RFC 的主页或Github 中的 vuejs/composition-api 中也没有提到它。

我创建了一个Codesandbox来详细说明这个问题。

<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png">
    <br>
    <p>Prop watch demo with select input using v-model:</p>
    <PropWatchDemo :selected="testValue"/>
  </div>
</template>

<script>
import { createComponent, onMounted, ref } from "@vue/composition-api";
import PropWatchDemo from "./components/PropWatchDemo.vue";

export default createComponent({
  name: "App",
  components: {
    PropWatchDemo
  },
  setup: (props, context) => {
    const testValue = ref("initial");

    onMounted(() => …

当创建与CLI（v3.7.0）的新项目中，有之间进行选择的选项dart-sass或node-sass编译器。

它们之间如何进行比较，以比Vue docs中声明的更具体？

Sass性能技巧

请注意，使用Dart Sass时，由于异步回调的开销，默认情况下，同步编译的速度是异步编译速度的两倍。为了避免这种开销，您可以使用Fiber包从同步代码路径中调用异步导入程序。为此，只需将光纤安装为项目依赖项即可：

npm install -D fibers

还请注意，由于它是本机模块，因此在操作系统和构建环境上可能存在兼容性问题。在这种情况下，请运行npm uninstall -D fibers以解决问题。

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
? Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

注意：这是一个与我之前关于该主题的问题类似的问题，该问题部分未解决，之后挑战的性质发生了很大变化：如何使用 ESLint + Prettier + Airbnb 规则 + TypeScript + Vetur 配置 Vue CLI 4？

在 2019 年，我非常着迷于在 TypeScript 中使用Vue配置“圣杯”工具设置，并让VS Code 自动修复您的代码，保存在 .vue、.ts 和 .scss 文件中。

但要更漂亮与工作最佳ESLint和Vetur结束了太多的挑战。因为 Prettier 和 ESLint 的固有冲突具有部分相同的目标和类似的规则检查，并且 Vetur 为 VS Code 中的这种特定组合增加了更多复杂性。

此外，当设置大部分工作时，您需要连续多次保存文件是相当令人恼火的。因为一旦 ESLint 发现并修复了一组错误，就会出现新的错误，并且它不够先进，无法连续运行这些检查和修复，直到所有错误都被清除......

2019 年 11 月，我参加了多伦多 Vue Conf 会议，在 Evan 先生的研讨会 Deep Dive with Vue 3.0 中，我向他询问了这个问题。他说官方工具很快就会进行大修，新版本的 ESLint 将会有新功能......

他还暗示，在这一点上，几乎所有 Vue 官方样式指南的规则检查都写入了自动修复逻辑，结合即将推出的 Vue 3.0 完全模块化架构，甚至可能会看到官方 VS Code …

在撰写本文时，Vue 3.0 已经发布了第一个稳定的v3.0.0 'One Piece' 版本，Vuex 4 处于v4.0.0-beta.4 中。

不幸的是，目前还没有关于如何在 TypeScript 中使用 Vuex 4 模块的官方示例......

作为进一步的要求，我希望在它们自己的文件中存储模块状态、突变、getter 和操作。这使得在这些模块增长时更容易管理代码。

我设法在Github和Codesandbox 中拼凑了一个工作示例存储库。

通过使用这些资源中提供的示例：

• Vuex + TypeScript by Andrew 在 Dev.to
• 要点贾维斯佩雷斯/index.ts
• 回购 andrewvasilchuk/vuex-typescript
• Vue 3 和 Vuex 4：在 Dev.to 中由 Barylski 组合的 useStoreModule
• LogRocket 在 Vuex 中映射的完整指南

但是，仍有一些问题有待解决：

1. 解决依赖循环 linting 错误

目前，模块的index.ts、actions.ts和getters.ts中的类型依赖于RootState从主商店导入。

当使用ESLint Airbnb linting config 时，我遇到了 …

我正在处理 HTML 表格，并html-to-paper在 vue.js 中使用该表格将该表格打印到打印机，我正在做的是点击添加创建一个新行，然后点击打印我正在尝试打印表格，但它没有任何仅显示空单元格的数据

代码 App.vue

    <template>
  <div id="app">
    <button type="button" @click="btnOnClick">Add</button>

    <div id="printMe">
      <table class="table table-striped table-hover table-bordered mainTable" id="Table">
    <thead>
      <tr>

        <th class="itemName">Item Name</th>
        <th>Quantity</th>
        <th>Selling Price</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(tableData, k) in tableDatas" :key="k">

        <td>
          <input class="form-control" readonly v-model="tableData.itemname" />
        </td>
        <td>
          <input class="form-control text-right" type="text" min="0" step=".01" v-model="tableData.quantity" v-on:keyup="calculateQty(tableData)" />
        </td>
        <td>
          <input class="form-control text-right" type="text" min="0" step=".01" v-model="tableData.sellingprice" v-on:keyup="calculateSPrice(tableData)" />
        </td>
        <td>
          <input readonly class="form-control text-right" type="text" min="0" step=".01" v-model="tableData.amount" …

我正在将组件从常规 Vue 3 Composition API 重构为脚本设置语法。初始点：

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { mapGetters } from 'vuex';

export default defineComponent({
  name: 'MyCoolBareComponent',
  computed: {
    ...mapGetters('auth', ['isAdmin']),
  },
});
</script>

当前Vue v3 迁移文档，SFC Composition API Syntax Sugar (<脚本设置>)，链接到此 RFC 页面：https://github.com/vuejs/rfcs/pull/182

使用计算反应性属性只有一个示例：

export const computedMsg = computed(() => props.msg + '!!!')

由于当前没有可用的 Vuex 4 文档提到<scrip setup>，所以我仍然不清楚在使用此语法时应该如何使用？mapGetters或者使用 Vuex 4 解决这个问题的正确方法是什么？

即使VueJS 2 官方文档中关于 prop 验证的说明（作为代码示例的注释行）：

// 基本类型检查（null并且undefined值将通过任何类型验证）

我在复制此代码时遇到以下错误- 为什么会这样？

[Vue warn]: Invalid prop: type check failed for prop "value". Expected String, Number, Boolean, got Null 

[Vue warn]: Invalid prop: type check failed for prop "value". Expected String, Number, Boolean, got Null 

我正在尝试将stylelint集成到我新创建的 Vue 项目中。

我认为这将是使用Stylelint Webpack 插件的一个简单案例，但是当我运行时yarn serve，任何错误都会完全冻结它而没有输出。如果我运行yarn build，构建将按预期失败，但只会打印"There was a stylelint error"。

我vue.config.js的如下：

const stylelintPlugin = require('stylelint-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new stylelintPlugin({ files: ['**/*.(vue|scss)'] }),
    ],
  },
};

这是我当前的版本package.json：

 "@vue/cli-service": "^3.9.0",
 "stylelint": "^10.1.0",
 "stylelint-config-recommended": "^2.2.0",
 "stylelint-scss": "^3.9.2",

这是在 HTML 页面上使用 VueJS 的标准方法（不带包）。没有任务。

<script>
new Vue({
  el: '#root',
  data: {
    title: 'Hello'
  }
});
</script>

为什么垃圾收集器不收集这个 Vue 对象？

Vue 3.0（现在稳定）有一个未公开的功能Bundler Build Feature Flags：

从 3.0.0-rc.3 开始，esm-bundler 构建现在公开可以在编译时覆盖的全局功能标志：

VUE_OPTIONS_API（启用/禁用选项 API 支持，默认值：true）

VUE_PROD_DEVTOOLS（在生产中启用/禁用开发工具支持，默认值：false）

构建将在不配置这些标志的情况下工作，但是强烈建议正确配置它们以便在最终包中获得适当的 tree-shaking。要配置这些标志：

webpack：使用定义插件

汇总：使用@rollup/plugin-replace

Vite：默认配置，但可以使用定义选项覆盖

注意：替换值必须是布尔文字，不能是字符串，否则打包器/压缩器将无法正确评估条件。

如何使用 vue.config.js 和 Webpack 实际配置这个构建标志？

尝试过这种方式，但它似乎不会影响供应商捆绑包的大小，还是应该仅适用于生产版本（目前无法尝试，因为有一个 vue-loader 错误破坏了我的产品版本）？

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      // Define Bundler Build Feature Flags
      new webpack.DefinePlugin({
        // Drop Options API from bundle
        __VUE_OPTIONS_API__: false,
      }),
    },
  },
};