介绍

在vue项目中要控制一个组件（如：dialog)的显示和隐藏通用的方案可以通过指令v-if v-show

• v-if的特点是首次不用渲染，缺点是每次改变状态时都需实例化组件，对于频繁改变状态的组件性能较差
• v-show的特点是自动实例化，通过样式dispaly控制显示和隐藏。缺点是可能这个组件用户一直用不到，或者当页面上有很多通过v-show控制的组件时，首屏实例化了很多无效的vue组件，构造了很多无用的DOM

场景

本人在项目中遇到以下场景：一个路由页面中有6个以上的类dialog组件，组件内部又很复杂，像多个select（options选项都在10个以上）。在此场景下我们既要v-if的需要时渲染又要v-show的性能

指南

passiveComponent通过vue插件的形式实现了这一目标

1，引入

	import Vue from 'vue'
	import PassiveComponent from 'passive-component'
	
	Vue.use(PassiveComponent)
	

2，API

• $passiveRender(renderComponent, listeners)

example

//testComponent.vue
<template>
	<div v-show="show">
		<p>show something</p>
		<button @click="close">close</button>
		<button @click="triggerEvent">action</button>
	</div>
</template>
<script>
	export default {
		data () {
			return {
				show: false
			}
		},
		methods: {
			triggerEvent () {
				this.$emit('change', 'change show')
			},
			close () {
				this.show = false
			}
		}
	}
</script>

// app.vue
<template>
	<div>
		<button @click="renderCom"></button>
	</div>
</template>
<script>
	import testComponent from './testComponent.vue'
	export default {
		data () {
			return {}
		},
		methods: {
			renderCom () {
				// 通过this.passiveRender 渲染testComponent组件到DOM
				this._testComRender = this.$passiveRender(testComponent, {
					change (value) {
						console.dir(value)
					}
				})
				this._testComRender.show = true
			}
		}
	}
</script>