vue.js 页面内容多,出现卡顿现象?有谁遇到过吗?

使用v-model 绑定了一些input,
在方法中多次调用了 this.model
然后在文本框输入内容的时候会出现卡顿现象,
例如:在按下键盘a后,文本框会出现延迟输入(0.5秒才出现a)的现象。
(可能因为双向绑定,导致更新了所有调用了this.mode的地方??)

<template>
    <div>
         <input type="text" v-model="testModel" />
    </div>
</template>

<script>
export default {
    created: function () {
     ....
     this.testModel=111
     ....
    },
    data() {
        return {
            testModel: 1000
        }
    },
   
    methods: {
       ....一些调用,this.testModel
    }
}
</script>

ps:
有什么办法能解决这类问题呢?
爬坑(vue)之路好艰难…

刚刚又发现,v-model改成v-model.lazy 就会正常。。。这是啥原因 ..

回答:

我们也经常用不会出现你说的卡顿现象,不会是你的电脑卡吧。

回答:

实际上 Vue 中 methods 中的方法并不是响应式触发的,它只是能够在触发时响应式地获取依赖的 VM 数据而已。

卡顿问题可以从其他角度分析,如开发包尺寸是否影响浏览器 parse、是否添加了额外的 CSS / JS 动画效果、是否在 input 相关事件上绑定了沉重的监听器方法等。使用 Chrome 的 Performance 可以查看时间线上各个函数调用的费时,或许可以对你有所帮助。

回答:

在什么情况下调用修改 this.testModel 的?可以考虑用 lodash 的 throttle 或者 debounce

回答:

额(⊙o⊙)…单单vue就卡,加上后台不会挂了吧

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注