vue开发技巧——render函数代替的template

render函数代替template

如题，我们来用render函数来探索更简洁需求实现，当然所有的template都可以用render 函数来代替。

首先描述下需求，我们常常会写如下代码:
template中一个值中 频繁使用 v-if或者v-show 判断展示

<template>
    <div id="app">
        <div v-if = 'value === 1'>
            <h1> 1 </h1>
        </div>
        <div v-else-if = 'value === 2'>
            <h1> 2 </h1>
        </div>
        <div v-else-if = 'value === 3'>
            <h1> 3 </h1>
        </div>
        <div v-else-if = 'value === 4'>
            <h1> 4 </h1>
        </div>
        <div v-else-if = 'value === 5'>
            <h1> 5 </h1>
        </div>
        <div v-else-if = 'value === 6'>
            <h1> 6 </h1>
        </div>
        <div v-else>
            <h1> 7 </h1>
        </div>
    </div>
</template>

不知道看到上面的代码，会不会很熟悉呢，反正以前我就是这么来写代码，是不是看起来很low，代码很冗余呢，这样的代码一旦代码多起来了，维护起来也是很有难度的。

那我们用render函数来实现下：
我们新建一个文件为 h1Com.vue

export default {
    props:{
        text:{
            type:String,
            default:''
        },
        type:{
            type:String,
            default:''
        }
    },
    render(h){
        return h('h1',{
            //v-bind:class
            class:{
                'h1-success' : this.type === 'success',
                'h1-danger' : this.type === 'danger',
                'h1-warning' : this.type === 'warning',
            },
            //dom属性
            domProps:{
                innerText:this.text
            },
            // 绑定事件
            on:{
                click:this.clickEvent
            }
        })
    },
    methods:{
        clickEvent(){
            this.$emit('myEvent');
        }
    }
}

那我们在原文件中使用：

<template>
    <div id="app">
       <h1Com  :type='type' :text='text' @myEvent=''/>
    </div>
</template>
<script>
import h1Com from '@/compents/h1Com'
export default {
	data(){
		return {
			type:'success',
			text:'是不是很简洁',
		}
	}，
	components:{
		h1Com 
	}
}
</script>

如上图，是不是很简洁，维护起来也会更方便。那有的人就会觉得多此一举，这样写下来，代码量岂不是比原来更多嘛，有什么方便的呢；还是感觉那几行v-if更好维护。

那我只能说，你品，你细品。