vue(v-for和v-if谁的优先级高？应该如何正确使用避免性能问题？)

直接上代码了

<template>
    <div>
        <h1>v-for和v-if谁的优先级高？应该如何正确使用避免性能问题？</h1> 
        <!-- 测试1 -->
        <div v-if="isShow"> 
            <p v-for="(item,index) in arr" :key="index">{
   
   {item.name}}</p> 
        </div> 
        <!-- 测试2 -->
        <!-- <p v-for="(item,index) in arr" :key="index" v-if="isShow">{
    
    {arr.name}}</p>  -->
    </div>
</template>

<script>
export default {
    
    
    data() {
    
     
        return {
    
     
            arr: [ 
                {
    
    name:'张三'}, 
                {
    
    name:'李四'}, 
            ] 
        } 
    }, 
    created(){
    
    
        // 测试1
        console.log(this.$options.render) 
        //输出结果1
        // var render = function() {
    
    
        //     var _vm = this
        //     var _h = _vm.$createElement
        //     var _c = _vm._self._c || _h
        //     return _c("div", [
        //         _c("h1", [
        //             _vm._v("v-for和v-if谁的优先级高？应该如何正确使用避免性能问题？")
        //         ]),
        //         _vm.isShow? _c("div",_vm._l(_vm.arr, function(item, index) {
    
    
        //             return _c("p", { key: index }, [_vm._v(_vm._s(item.name))])
        //         }),0): _vm._e()
        //     ])
        // }

        // 测试2
        // console.log(this.$options.render) 
        //输出结果2
        // var render = function() {
    
    
        //     var _vm = this
        //     var _h = _vm.$createElement
        //     var _c = _vm._self._c || _h
        //     return _c("div",[
        //			_c("h1", [
        //         		_vm._v("v-for和v-if谁的优先级高？应该如何正确使用避免性能问题？")
        //     ]),
        //     _vm._l(_vm.arr, function(item, index) {
    
    
        //         return _vm.isShow
        //             ? _c("p", { key: index }, [_vm._v(_vm._s(_vm.arr.name))])
        //             : _vm._e()
        //         })
        //     ],2)
        // }
    },
    computed: {
    
     
        isShow() {
    
     
            return this.arr && this.arr.length > 0
        }, 
    }
}
</script>

总结

1. 显然v-for优先于v-if被解析
2. 如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能
3. 要避免出现这种情况，则在外层嵌套template(div)，在这一层进行v-if判断，然后在内部进行v-for循环
4. 如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项