我想确保此 Vue 应用程序的用户仅在输入框中输入格式正确的货币值。为此，我添加了一个正则表达式测试，以确保用户只能输入格式正确的值。根据我在网上找到的许多 JavaScript 正则表达式测试人员的说法，正则表达式按预期工作。当我在开发环境中运行应用程序时，一切正常。
但是，当我使用 npm run build 并使用应用程序的缩小版本时，在输入框中输入非数字会导致网络浏览器崩溃。 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 文件(确保将其放在组件文件夹下名为共享的子文件夹中):
<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 来运行缩小后的代码。在应用程序中，输入非数字字符将导致浏览器崩溃。
此代码的缩小版本是否会导致无限循环？
最佳答案
当您在模板中的某处引用error 时，问题就会开始出现。 Vue 开发服务器将开始警告您“组件渲染函数中可能存在无限更新循环。”。这可能是导致您的构建版本崩溃的原因。
“组件渲染函数中可能存在无限更新循环。”是什么意思？意思是？
当模板中的数据发生变化时，Vue 会重新渲染包含数据的模板。那里没有什么奇怪的事情发生。如果您引用变量 numberOfUnicorns 并添加 1，因为您发现了一个`，您希望将其反射(reflect)在屏幕上。
无限更新循环意味着在渲染期间使用的变量会以某种方式发生更改。这通常是由非“纯”函数( Wikipedia )引起的。
为什么会发生在你身上？
您的方法 premiumDue 设置 this.error。正如我之前提到的，当模板中使用 error 时，问题就开始出现。在您的情况下，将 this.error 传递给 ErrorList，然后调用 premiumDue，这会设置 this.error并将渲染 View 标记为脏。然后重新渲染 View 。超过。结束了。结束了。
开发服务器似乎对这种错误更加宽容，并且显然停止了重新渲染周期。构建的版本已经过优化，并且相信您不会使其陷入无限循环......当事实并非如此时，这显然会导致崩溃。
如何解决？
这是更难的部分。首先，您需要重写 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 上创建一个触发验证函数的观察程序来模拟这一点。
watch: {
classes: {
deep: true,
handler() {
this.validatePartial();
}
}
}
一种不太激进的验证方法是在输入上使用 blur 事件来触发验证。你不会使用观察者。这样，只有当用户完成输入时才会弹出错误。
<input type="text" v-model="clazz.payroll" @blur="validatePartial" />
关于javascript - Vuejs 应用程序缩小导致浏览器崩溃，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53675669/