小编Kei*_*eno的帖子

我在调试 Vue 应用程序时遇到问题，因为步进可以跳过行或无法在有效行上设置断点。

我想这是一个 sourcemap 问题，但不确定从哪里开始挖掘。可能是 Vue-loader、Webpack 或 Babel 之一。

测试：

视图：2.6.10

vue-cli 4.1.2

该问题可以重现如下：

创建新的 Vue 项目：

vue 创建测试

只需使用默认值

光盘测试

npm 运行服务

将 HelloWorld.vue 替换为：

<template>
  <button @click="save()">
    Save
  </button>

</template>

<script>
export default {

  methods: {

    async save() {
      debugger;
      let valid = false;
      if (valid) {
        return;
      } else {
        console.log("Hi")
      }
    }
  }
}
</script>

在 Chrome 中打开 devtools，点击保存按钮并尝试在行上放置断点：

if (valid) {

在我的测试中，断点没有设置。

如果我从 save 方法中删除async，则可以设置断点。

使用 Chrome 79 和 Firefox 73 进行测试。 …

我一直在关注他们网站上的官方 VueJS 路由器文档：. 我现在面临的问题是，它会自动将我重定向到 url: http://127.0.0.1:8080/#/，尽管我输入了 URL: http://127.0.0.1:8080/。

当我点击一个按钮，即设置一个新的URI对我来说，像这样同样出现：http://127.0.0.1:8080/#/foo。当我按下按钮时会发生这种情况，这应该让我到达那里。

如果我打开 URL：http://127.0.0.1:8080/foo它会自动将我的 URL 重写为http://127.0.0.1:8080/foo#/.

其他一切仍然有效，并且正在呈现路由器视图，但是对于用户而言，如果没有烦人的 # 来体验该站点肯定会很好。

如前所述，我确实遵循了 VueJS 文档，但我对某些内容进行了一些更改。但是，这些不会影响错误。

这是我的 main.js 文件。

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import AnotherComponent from './components/AnotherComponent.vue';

Vue.use(VueRouter);
Vue.config.productionTip = false;

const routes = [
    { path: '/foo', component: AnotherComponent }
];

const router = new VueRouter({
    routes
});

new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

这是我的 App.vue …

我目前正在编写一个 React 应用程序，当任何可观察的值发生变化时，它应该能够重新渲染组件。问题是，email如果它发生变化，我将无法重新渲染。

store.ts

export class ExampleStore {
  @observable email = 'hello';

  @action setEmail(email: string) {
    this.email = email;
  }
}

索引.tsx

const stores = {
  exampleStore
};

ReactDOM.render(
  <Provider {...stores}>
    <App />
  </Provider>,
  document.querySelector('#root')
);

应用程序.tsx

interface Props {
  exampleStore?: ExampleStore;
}

@inject('exampleStore')
@observer
export class App extends React.Component<Props, {}> {
  componentDidMount() {
    setInterval(() => {
      this.props.exampleStore!.setEmail(Math.random() * 10 + '');
    }, 2500);
  }

  render() {
    const { email } = this.props.exampleStore!;
    return <div>{email}</div>;
  }
}

我见过很多使用 …