Vuejs App缩小导致浏览器崩溃

时间：2018-12-07 19:23:54

标签： javascript vue.js minify

我想确保该Vue应用程序的用户仅在输入框中输入格式正确的货币值。为此，我添加了一个Regex测试，以确保用户只能输入格式正确的值。根据我在网上找到的用于JavaScript的许多不同的Regex测试人员的说法，该Regex可以正常工作。在开发环境中运行应用程序时，一切正常。

但是，当我使用npm run build并使用应用程序的缩小版本时，在输入框中键入非数字会导致Web浏览器崩溃。 Windows任务管理器非常清晰地显示了该特定选项卡峰值的CPU使用率。使用Chrome调试器时，看起来任何非数字字符都会导致应用进入无限循环。但是，在非缩小版中不会发生这种情况。

要重新创建问题，请使用Vue CLI创建一个新的Vue项目。编辑App.vue文件，如下所示：

<template>
  <div id="app">
    <Reporting/>
  </div>
</template>

<script>
import Reporting from './components/Reporting'

export default {
  name: 'app',
  components: {
    Reporting
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

编辑main.js文件，如下所示：

import Vue from 'vue'
import Vue2Filters from 'vue2-filters'

import App from './App.vue'

Vue.config.productionTip = false

Vue.use(Vue2Filters)

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

您需要安装vue2-filters，因此请使用npm install --save vue2-filters进行安装。

添加此Reporting.vue组件：

<template>
    <div id="Reporting" style="min-height: inherit; display: flex; flex-direction: column;">
        <div class="mainbody">
            <div id="content">
                <ErrorList v-if="error" :error="error"/>
                <table>
                    <thead>
                        <tr>
                            <th scope="col">
                                State
                            </th>
                            <th scope="col">
                                Class
                            </th>
                            <th scope="col">
                                Description
                            </th>
                            <th scope="col">
                                Net Rate
                            </th>
                            <th scope="col">
                                Payroll
                            </th>
                            <th scope="col">
                                Premium Due
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(clazz, index) in classes" :key="index">
                            <td scope="row" data-label="State">
                                {{ clazz.state }}
                            </td>
                            <td data-label="Class">
                                {{ clazz.classCode }}
                            </td>
                            <td data-label="Description">
                                {{ clazz.description }}
                            </td>
                            <td data-label="Net Rate" class="alignright">
                                {{ clazz.netRate | currency }}
                            </td>
                            <td data-label="Payroll">
                                <input type="text" v-model="clazz.payroll"/>
                            </td>
                            <td data-label="Premium Due" class="alignright">
                                {{ premiumDue(clazz) | currency }}
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr class="subtotal">
                            <td colspan="3" aria-hidden="true"></td>
                            <td colspan="2" class="alignright lighter">Premium Total:</td>
                            <td class="alignright">{{ premiumTotal() | currency }}</td>
                        </tr>
                        <tr class="subtotal last">
                            <td colspan="3" aria-hidden="true"></td>
                            <td colspan="2" class="alignright lighter">Tax Total:</td>
                            <td class="alignright">{{ taxTotal() | currency }}</td>
                        </tr>
                        <tr class="grandtotal">
                            <td colspan="3" aria-hidden="true"></td>
                            <td colspan="2" class="alignright lighter">Grand Total:</td>
                            <td class="alignright">{{ (taxTotal() + premiumTotal()) | currency }}</td>
                        </tr>
                        <tr class="formbuttons">
                            <td colspan="4" aria-hidden="true"></td>
                            <td><button class="button-sm purple" @click="onClear">Clear</button></td>
                            <td><button class="button-sm purple" @click="onSubmit">Submit</button></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
/* eslint-disable vue/no-unused-components */

import ErrorList from './shared/ErrorList'

export default {
    name: 'Reporting',
    components: { ErrorList },
    data() {
        return {
            error: null,
            classes: []
        }
    },
    methods: {
        onClear() {
            this.classes.forEach(clazz => {
                clazz.payroll = ''
            })
        },
        validate(lines) {
            for (let line of lines) {
                if (!(/^\d*(\.\d{1,2})?$/.test(line.quantity))) {
                    this.error = { message: 'Payroll must be in number format with no more than 2 places after decimal.' }
                    return false
                }
            }
            this.error = null
            return true
        },
        onSubmit(e) {
            let lines = []
            this.classes.forEach(clazz => {
                lines.push({
                    classCode: clazz.id,
                    quantity: clazz.payroll,
                    rate: clazz.netRate,
                    taxRate: clazz.taxRate
                })
            })
            this.validate(lines)
        },
        premiumDue(clazz){
            if (!clazz.payroll) {
                this.error = null
                return 0
            } else if (/^\d*(\.\d{1,2})?$/.test(clazz.payroll)) {
                this.error = null
                return (clazz.payroll / 100) * clazz.netRate
            } else {
                this.error = { message: 'Payroll must be in number format with no more than 2 places after decimal.' }
                return 0
            }
        },
        premiumTotal() {
            return this.classes.reduce((accumulator, clazz) => {
                return (clazz.payroll) ? accumulator + this.premiumDue(clazz) : accumulator + 0
            }, 0)
        },
        taxDue(clazz){
            return this.premiumDue(clazz) * clazz.taxRate
        },
        taxTotal() {
            return this.classes.reduce((accumulator, clazz) => {
                return (clazz.payroll) ? accumulator + this.taxDue(clazz) : accumulator + 0
            }, 0)
        },
        initialize() {
            this.classes.push({
                classCode: "5540",
                description: "Roofing",
                name: "CC-00002",
                netRate: 12.34,
                state: "CA",
                taxRate: 0.035
            })
            this.classes.push({
                classCode: "8810",
                description: "Clerical",
                name: "CC-00001",
                netRate: 0.68,
                state: "CA",
                taxRate: 0.035
            })
        }
    },
    beforeRouteUpdate(to) {
        this.onClear()
        this.initialize()
    },
    created() {
        this.initialize()
    }
}
</script>

<style scoped>
</style>

添加此ErrorList.vue文件（确保将其放在components文件夹下名为shared的子文件夹中）

<template>
    <section>
        <div v-if="error.message">{{ error.message }}</div>
        <div v-if="error.errors && error.errors.length > 0">
            <ul>
                <li v-for="(err, index) in error.errors" :key="index"><h1>{{ err.message }}</h1></li>
            </ul>
        </div>
    </section>
</template>

<script>
  export default {
    name: 'ErrorList',
    props: ['error']
  }
</script>

<style scoped>

</style>

现在运行命令npm run build。然后运行命令serve -s dist以运行压缩后的代码。在应用中，在输入中输入非数字字符，这将导致浏览器崩溃。

此代码的缩小版本是否会导致无限循环？

1 个答案:

答案 0 :(得分：2)

当您在模板中的某处引用了error时，就会开始出现问题。 Vue开发服务器将开始警告您“组件渲染功能中可能存在无限更新循环”。这可能是导致您的内置版本崩溃的原因。

“组件渲染功能中可能有无限的更新循环”是什么？是什么意思？

Vue当其中的数据更改时，将使用数据重新渲染模板。那里没什么奇怪的。如果您引用变量numberOfUnicorns并添加1，因为您发现了一个`，那么您希望它反映在屏幕上。

无限更新循环意味着在渲染过程中以某种方式更改了在渲染过程中使用的变量。这通常是由于不是'pure'（Wikipedia）的函数引起的。

为什么会这样？

您的方法premiumDue设置this.error。如前所述，当在模板中使用error时，问题开始出现。根据您的情况，将this.error传递给ErrorList，然后调用premiumDue，它设置this.error并将标记的视图标记为脏。然后重新渲染视图。过度。还有。还有。

对于这种错误，开发服务器似乎更宽容，并且显然停止了重新渲染周期。内置版本经过了优化，并相信您不会使它以无限循环结束……当事实并非如此时，这显然会导致崩溃。

您如何解决？

这是最难的部分。首先，您需要重写premiumDue，使它变得纯净。

premiumDue(clazz) {
  if (!clazz.payroll) {
    return 0;
  } else if (/^\d*(\.\d{1,2})?$/.test(clazz.payroll)) {
    return (clazz.payroll / 100) * clazz.netRate;
  } else {
    return 0;
  }
}

现在，您的验证不再起作用，因此，请对此做一些处理。您的validate函数检查是否所有字段都已填写，这对于我们要执行的操作有点严格。相反，我们可能想定义一些宽容的验证函数validatePartial。

validatePartial() {
  for (let line of this.classes) {
    if (line.payroll && !/^\d*(\.\d{1,2})?$/.test(line.payroll)) {
      this.error = {
        message:
          "Payroll must be in number format with no more than 2 places after decimal."
      };
      return false;
    }
  }
  this.error = null;
  return true;
}

它与validate基本相同，但是我们没有使用循环遍历参数，而是使用this.classes。仅当line.payroll中确实包含某些内容时，才会触发错误消息。

尽管如此，我们仍然需要触发它，我看到了两个选择。以前，您需要在每次击键时触发它，因为每次击键都会更改this.classes，从而导致重新渲染。我们可以通过在this.classes上创建一个触发validate函数的观察程序来进行仿真。

watch: {
  classes: {
    deep: true,
    handler() {
      this.validatePartial();
    }
  }
}

一种不太积极的验证方法是改为在您的输入上使用blur事件来触发验证。您不会使用观察者。这样，错误仅在用户输入完毕后弹出。

<input type="text" v-model="clazz.payroll" @blur="validatePartial" />

Edit Vue Template

相关问题
最新问题