带有创建DOM的构造函数，在Vue里数据监听驱动创建实例时，感觉像是异步的

发布于 2022-09-07 12:09:14 字数 4820 浏览 16 评论 0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://cdn.bootcss.com/quill/1.3.6/quill.bubble.min.css" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <tmp :cur="curL"></tmp>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <script src="https://cdn.bootcss.com/quill/1.3.6/quill.js"></script>
    <script>        
        var vm = new Vue({
            el : '#app',
            data :function(){
                return {
                    initData : [],
                    limit : 5,
                    pages : [],
                    ind : 0,
                    curL : []
                }
            },
            created : function(){
                // 初始化生成20条数据
                for(var i = 0; i < 20; i++){
                    this.initData.push({
                        sId : 'sl' + i,
                        cnt : null
                    })
                }
            },
            mounted : function(){
                this.loadPage()
            },
            methods : {
                // 切分
                segFn : function(){
                    var senObj = {
                        sId : 'sl' + 21, // 写一个死值
                        cnt : null
                    }
                    // 插入一个新数据对象
                    this.initData.splice(1,0,senObj)
                    this.loadPage()
                },
                loadPage : function(){
                    var lmt = this.limit,
                        len = this.initData.length,
                        pageL = Math.ceil(len / lmt);
                    for(var i = 0; i < pageL; i++){
                        if(i != (pageL-1)){
                            this.pages[i] = this.initData.slice(i*lmt, i*lmt+lmt)
                        } else {
                            this.pages[i] = this.initData.slice(i*lmt)
                        }
                    }   
                    this.curL = this.pages[this.ind]                
                }
            },
            components : {
                'tmp' : {
                    template : '<div>\
                                    <div v-for="item in cur" :id="item.sId"></div>\
                                </div>',
                    props : ['cur'],
                    data : function(){
                        return {
                            toolbarOptions: [
                                ['bold', 'italic', 'underline', 'strike'],
                                [{
                                    'color': [],
                                }]
                            ]
                        }
                    },
                    watch : {
                        cur : function (val){
                            // 
                            this.$nextTick(function(){
                                val.forEach(element => {
                                    //如果存在实例，就不重复实例
                                    if(element.cnt) return;
                                    // 富文本编辑器实例
                                    element.cnt = new Quill('#'+element.sId,{
                                        modules : {
                                            toolbar : this.toolbarOptions
                                        },
                                        theme: 'bubble'
                                    })
                                    // 实例赋值方法
                                    element.cnt.setText(element.sId)
                                });
                            })
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

所有的代码，总的逻辑就是，初始化时，生成20条数据，在loadPage方法中，根据数据量，每页数据量，进行分页；然后把所有数据initData分到pages，子组件通过cur接受当页的数据，并进行循环渲染；这些是流程描述；

问题是，初始化initData的数据，通过子组件实例方法，生成都是一一对应的实例与sId；

但是当我对initData进行插入操作时，实例名与sId不在一一对应了

我在用普通的构造函数测试都不存在问题，只有使用quill插件时出现问题，quill每次实例化时，都会动态常见dom元素，原因可能就这这里，我原本的想法就是不管怎么操作数组，都是一一对应的！
我上面贴出来的代码复制出来直接就能跑，拜托大神帮我解答一下这个问题，第一次碰到，如果我没描述清楚，可以回复我，我再进行描述。

分享到QQ

分享到微博