长沙哪里有做网站的公司,网站建设汉狮怎么样,泰安房产中介公司,网站建设营销企业戳蓝字「前端技术优选」关注我们哦#xff01;作者#xff1a;yeyan1996https://juejin.im/post/6892577964458770445应某人的要求被迫营业#xff0c;望各位看官不要吝啬手中的赞-。-背景在使用 uni-app 开发小程序时#xff0c;有个填写表单的需求#xff0c;包含两个输… 戳蓝字「前端技术优选」关注我们哦作者yeyan1996https://juejin.im/post/6892577964458770445应某人的要求被迫营业望各位看官不要吝啬手中的赞-。-背景在使用 uni-app 开发小程序时有个填写表单的需求包含两个输入框看起来像这样image-20201107143814796两个在普通不过的输入框因为需要复用一些样式和逻辑所以将输入框抽象成了组件代码简化后如下子组件代码由于在父组件中需要依赖输入的值请求接口为避免接口频繁调用这边引入 lodash debounce 用于防抖这个需求在 yeyan1996 眼中没有任何难度但在几天后却收到了部分用户反馈说在两个输入框分别填写了值但最终只有一个输入框有效这时才回头想起代码中的 debounce ....问题原因收到用户反馈后yeyan1996 尝试多次点击输入框发现问题并不是必现最终总结出了规律填写第一个输入框后快速对第二个输入框进行输入才会造成最终的表单数据中只有一个值的问题通过下图子组件的 log 可以看到虽然 ui 界面显示两个输入框都有值但实际只触发了第二个输入框的 logKapture 2020-11-07 at 14.58.57之所以 ui 界面显示两个输入框都有值是因为是用户直接和 textarea 控件交互实际并没有更新控件绑定的 value 值最终结论第一个输入框中被 debounce 包裹的函数并没有执行是防抖问题么尝试将 debounce 去掉后果然 bug 解决了Kapture 2020-11-07 at 15.06.41那么是防抖的问题么不妨先思考下 Vue 组件的实现原理我在 [Vue.js进阶]从源码角度剖析Vue的生命周期 中提到过每个 .vue 文件可以理解为一个构造函数或者一个 Class而在父组件中引用组件就等于对其的实例化 上述代码即创建了 2 个 CustomTextarea 组件的实例熟悉面向对象的同学应该知道构造函数实例化时同时会创建实例的属性和方法一般每个实例的属性都不相同而方法因为是函数所以会复用已达到节省内存的效果class Person { constructor(name) { this.name name } eat() {}}const person1 new Person(张三)const person2 new Person(李四)console.log(person1.name person2.name) // falseconsole.log(person1.eat person2.eat) // trueVue2 的组件借鉴了面向对象的原理虽然内部的实现方式不同但最终的行为一致即组件的每个实例都拥有不同的 data但会复用相同的 methods源码地址https://github.com/vuejs/vue/blob/dev/src/core/instance/state.js#L286image-20201107155528333286 行中 methods 对象是每个组件实例共用的每实例化一个组件会创建相同的引用指向 methods 中的函数未命名上图案例中 所有 custom-textarea 中的 handleInput 都指向同一个函数而作为 props 的 value 字段是通过父组件传入的并不会共享(分别为 text1/text2)解决方案经过上述的分析答案显而易见两个组件实例都指向了同一个被 debounce 包裹的 handleInput 函数所以在输入第一个值后 1000 毫秒内快速切换到第二个输入框进行输入此时由于防抖效果仍存在导致第一次的输入并没有计算在内而第二次输入完毕后经过 1000 毫秒最终只会执行第二个 custom-textarea 的 handleInput只要使得每个组件实例的 handleInput 互相独立即可解决问题将 handleInput 从 methods 放到 data 中每次初始化时创建防抖函数此时每个组件实例的 handleInput 就不会互相干扰Kapture 2020-11-07 at 16.44.41大功告成???题外话Vue 组件中通过将 data 定义为一个函数函数的返回值作为组件的数据来源使得每个组件实例的数据都不相同而 Vue 组件中 methods 是所有实例共用的那么对于 watch/computed/生命周期它们是否会共用的呢和 methods 对象相同computed 对象的属性名是一个响应式变量而值是一个函数所以所有实例也会指向同一个函数但由于这个函数需要有返回值所以不会用防抖函数进行包裹很少遇到函数公用导致的问题而 watch 也和 methods 对象相同所有组件实例共用所以也会存在防抖的问题至于生命周期本身就是一个函数如果对生命周期设置了防抖多个组件实例同时初始化时也会造成只执行一次的情况参考资料[Vue.js进阶]从源码角度剖析Vue的生命周期【Vue原理】Methods - 源码版](https://segmentfault.com/a/1190000019605909)在看点这里
