时间戳

首页 > 解决方案 > Vue-循环和事件处理程序的最佳实践

vue.js - Vue-循环和事件处理程序的最佳实践

问题描述

我很好奇是否最好包含methods在循环中而不是使用v-if. 假设以下代码有效（它们不完整且无效）

例如：方法

<template >
    <div>
        <div v-for="(d, i) in data" v-bind:key="i">
            <span v-on:click="insertPrompt($event)">
                {{ d }}
            </span>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        data:[
            .....
        ]
    },
    methods:{
        insertPrompt(e){
            body.insertBefore(PROMPT)
        }
    }
}
</script>

DOM 将通过insertPrompt()仅用于显示的功能进行更新

例如：V-IF

//父母

<template >
    <div>
        <div v-for="(d, i) in data" v-bind:key="i">
            <child v-bind:data="d"/>

        </div>
    </div>
</template>

<script>
import child from './child'

export default {
    components:{
        child
    },
    data() {
        data:[
            .....
        ]
    },
}
</script>

//孩子

<template>
    <div>
        <span v-on:click="display != display">
            {{ d }}
        </span>
        <PROMPT v-if="display"/>
    </div>
</template>

<script>
import child from './child'

export default {
    components:{
        child
    },
    data(){
        return {
            display:false
        }
    },
    props: {
        data:{
            .....
        }
    },
}
</script>

这PROMPT是一个基本模板，使用来自循环数据单击的数据呈现。

两种方法都可以实现相同的最终结果。我最初的想法是在循环中添加额外的条件会对性能产生负面影响？！？！

非常感谢任何指导

标签： vue.jsvuejs2nuxt.js

解决方案

除非您在循环中渲染了非常大量的项目（并且大多数时候您没有），否则您根本不需要担心性能。任何差异都将是如此之小，没有人会注意到/受益于更快的微小触摸。

我想说的第二点是，自己操作 DOM 通常不是最好的主意：为什么现代 JavaScript 框架不鼓励与 DOM 直接交互

所以我无论如何都会坚持v-if有条件地渲染事物。如果您想在这里关心性能/速度，您可能会考虑您的应用程序的使用方式并在v-if和之间做出决定v-show。引用官方文档：

v-if是“真正的”条件渲染，因为它确保条件块内的事件侦听器和子组件在切换期间被正确销毁和重新创建。

v-if也是懒惰的：如果在初始渲染时条件为假，它不会做任何事情 - 条件块不会被渲染，直到条件第一次变为真。

相比之下，v-show它要简单得多——无论初始条件如何，元素总是被渲染，并使用基于 CSS 的切换。

一般来说，v-if切换成本较高，而 v-show 的初始渲染成本较高。因此v-show，如果您需要经常切换某些东西，则更喜欢，v-if如果条件不太可能在运行时改变，则更喜欢。

https://vuejs.org/v2/guide/conditional.html#v-if-vs-v-show

推荐阅读