vue项目中遇到的难点

Posted 2021-09-19 Frazier.

1. input中type为number时 max-length 失效

   解决：input type="tel"

2. vue组件中click事件失效

   解决：使用了bette-scroll插件做滚动。加.native也不好使，发现better-scroll的配置中没有设置 click：true，设置过之后click事件成功。

3. 不同商品页，id变化，商品不变

   监听$route变化，然后获取id重新去取数据。

4. 修改完数据点击提交后，数据变了 页面数据没有更新

   原因：因为vue的检查机制在进行视图更新时无法监测 数组中的某个对象的属性值的变化。(数据是引用数据类型，数据上没有get set方法)

   方案一：利用 this.set(this.obj,key,val)

   解析：第一个参数目标对象，第二个参数要修改数据下标，第三个参数修改后的新值。

   方案二：也可以使用$nextTick()这个方法

   解析：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM，

   Vue 在更新 DOM时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新！

   方案三：this.$forceUpdate(); //可以直接使用这个是强制更新 但不推荐使用

   调用强制更新方法this.$forceUpdate()会更新视图和数据，触发updated生命周期。