各位观众老爷，晚上好！我是今天的讲师，咱们今天聊聊Vue里怎么搞出一个高性能的表单脏检查机制，让你的表单体验嗖嗖的。
开场白：别让用户填了个寂寞
咱们先想想，啥是“脏检查”？简单说，就是用户改了表单，我们得知道他改了啥，这样才能决定要不要提示保存、禁用提交按钮等等。如果用户辛辛苦苦填了一堆东西，结果啥也没改，或者改了又改回去了，那我们是不是得告诉他：“老弟，没啥好保存的，洗洗睡吧。”
传统的脏检查，通常是在用户提交时，或者离开页面时，遍历整个表单，把当前值和初始值比较一遍。如果表单不大，那还好说。但如果你的表单像银河系一样浩瀚，那这个遍历的代价可就大了。用户填个表单，CPU都快烧起来了，体验能好吗？
所以，我们要想个办法，让Vue的响应式系统来帮我们。Vue的响应式系统，核心就是数据变化自动触发更新。我们只要巧妙地利用这个特性，就能实现一个高性能的脏检查。
第一步：把表单数据变成响应式的
首先，我们需要把表单数据放到Vue的data里面，让它变成响应式的。这很简单，直接上代码：
<template>
<div>
<input v-model="formData.name" type="text">
<input v-model="formData.email" type="email">
<textarea v-model="formData.description"></textarea>
<button :disabled="!isDirty">保存</button>
</div>
</template>
<script>
export default {
data() {
return {
formData: {
name: '',
email: '',
description: ''
},
initialFormData: {}, // 保存初始值的对象
isDirty: false // 标志表单是否被修改
};
},
mounted() {
// 在组件挂载后，保存初始值
this.initialFormData = JSON.parse(JSON.stringify(this.formData));
},
watch: {
formData: {
handler() {
this.isDirty = JSON.stringify(this.formData) !== JSON.stringify(this.initialFormData);
},
deep: true // 深度监听，确保对象内部属性的变化也能被监听到
}
}
};
</script>这段代码做了几件事：
formData: 这里是我们表单数据，用了v-model绑定到input和textarea上。initialFormData: 这是一个空对象，用来保存表单的初始值。mounted: 在组件挂载后，我们用JSON.parse(JSON.stringify(this.formData))深拷贝了一份formData，存到initialFormData里。为什么要深拷贝？因为直接赋值的话，initialFormData会和formData指向同一个对象，formData变了，initialFormData也会跟着变，那就没法比较了。isDirty: 一个布尔值，用来表示表单是否被修改过。初始值是false。watch: 监听formData的变化。一旦formData发生了任何变化，就会触发handler函数。在handler函数里，我们把formData和initialFormData都转成JSON字符串，然后比较这两个字符串是否相等。如果不相等，说明表单被修改了，就把isDirty设置为true。
deep: true：这个选项告诉Vue，要深度监听formData对象。也就是说，不仅formData本身的变化会被监听到，formData对象内部的属性的变化也会被监听到。
重点解释：为什么要用JSON.stringify()
你可能会问，为什么要用JSON.stringify()把对象转成字符串再比较？直接比较对象不行吗？
答案是：不行！
因为JavaScript里比较对象，比较的是引用。也就是说，只有当两个对象指向同一个内存地址时，它们才会被认为是相等的。而formData和initialFormData虽然内容一样，但它们是两个不同的对象，所以直接比较会永远返回false。
JSON.stringify()可以把对象转成JSON字符串，这样比较的就是字符串的内容了。只要内容一样，字符串就相等。
第二步：优化！优化！再优化！
上面的代码虽然能用，但还不够完美。每次formData发生变化，我们都要把整个对象转成JSON字符串，然后比较一遍。如果表单很大，这个操作的代价还是比较高的。
有没有更快的办法？当然有！我们可以只比较发生变化的字段。
<template>
<div>
<input v-model="formData.name" type="text">
<input v-model="formData.email" type="email">
<textarea v-model="formData.description"></textarea>
<button :disabled="!isDirty">保存</button>
</div>
</template>
<script>
export default {
data() {
return {
formData: {
name: '',
email: '',
description: ''
},
initialFormData: {},
dirtyFields: {}, // 记录被修改的字段
isDirty: false
};
},
mounted() {
this.initialFormData = JSON.parse(JSON.stringify(this.formData));
},
watch: {
'formData.name'(newValue, oldValue) {
this.checkDirty('name', newValue, oldValue);
},
'formData.email'(newValue, oldValue) {
this.checkDirty('email', newValue, oldValue);
},
'formData.description'(newValue, oldValue) {
this.checkDirty('description', newValue, oldValue);
}
},
methods: {
checkDirty(field, newValue, oldValue) {
if (newValue !== this.initialFormData[field]) {
this.$set(this.dirtyFields, field, true); // 标记为已修改
} else {
this.$delete(this.dirtyFields, field); // 恢复为未修改
}
this.isDirty = Object.keys(this.dirtyFields).length > 0; // 判断是否有任何字段被修改
}
}
};
</script>这次我们做了以下修改：
dirtyFields: 这是一个对象，用来记录哪些字段被修改过。key是字段名，value是true。watch: 我们不再监听整个formData对象，而是分别监听formData.name、formData.email、formData.description这三个属性。这样，只有当某个属性发生变化时，才会触发对应的watch函数。checkDirty: 这是一个自定义的方法，用来检查某个字段是否被修改过。它接收三个参数：字段名、新值、旧值。如果新值和初始值不一样，就把这个字段添加到dirtyFields里。如果新值和初始值一样，就把这个字段从dirtyFields里删除。this.$set和this.$delete: 这两个是Vue提供的响应式API。因为dirtyFields一开始是个空对象，所以我们不能直接用this.dirtyFields[field] = true来添加属性，这样Vue是无法监听到这个变化的。必须使用this.$set来添加响应式属性。同理，删除属性也需要使用this.$delete。isDirty: 监听所有需要检查的表单字段，如果dirtyFields的长度大于0，说明有字段被修改过，就把isDirty设置为true。
优化思路：只关注变化的部分
这次优化，我们只关注发生变化的字段，避免了每次都遍历整个表单。这样，即使表单很大，性能也不会受到太大影响。
第三步：更上一层楼！动态监听 + 防抖
上面的代码已经很不错了，但还有优化的空间。如果你的表单字段是动态生成的，那手动添加watch就太麻烦了。而且，用户可能会频繁地修改某个字段，导致checkDirty方法被频繁调用。
我们可以用watch的函数形式，动态地监听所有字段，并使用防抖函数来减少checkDirty方法的调用次数。
<template>
<div>
<input v-for="(item, index) in formFields" :key="index" v-model="formData[item.key]" :type="item.type">
<button :disabled="!isDirty">保存</button>
</div>
</template>
<script>
import debounce from 'lodash.debounce'; // 引入lodash的debounce函数
export default {
data() {
return {
formFields: [
{ key: 'name', type: 'text' },
{ key: 'email', type: 'email' },
{ key: 'description', type: 'textarea' }
],
formData: {
name: '',
email: '',
description: ''
},
initialFormData: {},
dirtyFields: {},
isDirty: false
};
},
mounted() {
this.initialFormData = JSON.parse(JSON.stringify(this.formData));
this.setupWatches(); // 设置监听
},
methods: {
setupWatches() {
// 动态监听所有字段
this.formFields.forEach(field => {
this.$watch(`formData.${field.key}`, debounce((newValue, oldValue) => {
this.checkDirty(field.key, newValue, oldValue);
}, 300)); // 300毫秒的防抖
});
},
checkDirty(field, newValue, oldValue) {
if (newValue !== this.initialFormData[field]) {
this.$set(this.dirtyFields, field, true);
} else {
this.$delete(this.dirtyFields, field);
}
this.isDirty = Object.keys(this.dirtyFields).length > 0;
}
}
};
</script>这次我们做了以下修改：
formFields: 一个数组，用来定义表单字段。每个字段都有一个key和一个type。setupWatches: 这个方法用来动态地设置监听。我们遍历formFields数组，为每个字段都添加一个watch。debounce: 这是一个防抖函数，用来减少checkDirty方法的调用次数。我们使用了lodash库的debounce函数，你也可以自己实现一个。- 动态监听: 使用模板字符串
formData.${field.key}可以动态监听formData对象中的属性。
防抖的意义：避免频繁触发
防抖函数的作用是，在一段时间内，如果同一个函数被多次调用，只执行最后一次。这样，即使用户频繁地修改某个字段，checkDirty方法也只会执行一次，从而提高了性能。
最佳实践：拆分组件
如果你的表单非常复杂，可以考虑把表单拆分成多个组件。每个组件负责一部分表单字段的脏检查。这样，可以减少单个组件的负担，提高性能。
高级技巧：Proxy + Set
如果你的项目对性能要求非常高，可以考虑使用Proxy和Set来实现脏检查。Proxy可以拦截对象属性的访问和修改，Set可以高效地存储被修改的字段。
这种方法的代码比较复杂，这里就不详细展开了，感兴趣的同学可以自己研究一下。
总结：让脏检查优雅起来
今天我们学习了如何利用Vue的响应式系统，实现一个高性能的表单脏检查机制。我们从最简单的版本开始，一步步地优化，最终得到了一个性能优异、可扩展性强的解决方案。
记住，好的代码就像艺术品一样，需要不断地打磨和优化。希望今天的讲解能帮助你写出更优雅、更高效的Vue代码。
Q&A环节
现在是提问时间，大家有什么问题都可以提出来。