Question

我正在创建一个评论系统，其中有许多评论（如300 + ）和Vue.js.

并且每个评论的管理部分（在下面标记为Component），当光标留在评论上时，管理部分会出现。

因此，如果有300条评论，管理部分组件将被复制300次，即使在计算机上也不利于移动设备（导致组件太多）。

我的想法是：是否可以通过移动来围绕评论共享相同的组件，这样只会有一个这样的管理部分？

Answer 1

我不知道有任何技术可以将公共组件移动到页面中的任何位置。这通常在jQuery世界中完成，但它会导致代码非常混乱且难以调试。

如@Nils在评论中所提到的，您可以使用v-if，它不会在DOM中呈现浮动组件。因此，它不会增加页面的重量，并且您的页面会感觉很快（相对）。

从技术上讲，它不应该有任何区别，因为Vue.js很容易渲染1000行。参考：http://www.stefankrause.net/wp/?p=316（点击彩色表格查看一些有趣的统计数据）

在下面的工作示例中，只有将光标置于其中一个注释字段后，“执行某些操作”按钮才会进入DOM。直到那时，它才会被渲染成DOM。

Vue.component('comment-block', {
    props: ["comment"],
    template: `
        <div class="comment" @mouseenter="displayOptions=true" @mouseleave="displayOptions=false">
            <div class="author">{{comment.author}} wrote:</div>
            <input type='text' v-model='comment.message'/>
            <div class="options" v-if="displayOptions"><button>Do something</button></div>
        </div>`,
    data: function(){
        return {
            displayOptions: false
        }
    }
});

new Vue({
    el: '#app',
    data: {
        comments: [
          {id: 0, author: 'Bob', message: "This is my comment #1"},
          {id: 1, author: 'Frank', message: "Comment #2"},
          {id: 2, author: 'Joe', message: "One more comment in this page (#3)"}
        ]
    }
});

body {
    margin: 20px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.comment {
    padding: 5px;
}
.comment .author {
    display: inline-block;
    width: 120px;
    text-align: right;
}
.comment input {
    display: inline-block;
    width: 240px;
}
.comment .options {
    display: inline-block;
}

<script src="https://unpkg.com/vue@2.1.5/dist/vue.js"></script>
<body>
    <div id="app">
        <p>List of comments:</p>
        <comment-block :comment="comment" v-for="comment in comments"></comment-block>
    </div>
</body>

注意：对于此示例，“执行某事”按钮除了简单显示之外什么也没做。

这是保持界面轻松的一种方法，但正如上面的性能分析博客文章中所提到的，这种微优化确实无关紧要，除非你遇到一些问题。

Vue.js：通过＆＃34;移动＆＃34;分享组件。它周围而不是复制它？

1 个答案: