Vue：动态组件与v-once指令

通过组件实现一个简单的点击切换功能

<div id="app">
				<child-one v-if="type === 'child-one' "></child-one>
				<child-two v-if="type === 'child-two' "></child-two>
				<button @click="hdclick">change</button>
		</div>
		<script>
			Vue.component('child-one',{
				template: '<div>child-one</div>'
			})
			Vue.component('child-two',{
				template: '<div>child-two</div>'
			})
			
			var app = new Vue({
				el:"#app",
				data: {
					type: 'child-one'
				},
				methods: {
					hdclick: function(){
						this.type = this.type === 'child-one' ?
							'child-two' : 'child-one'
					}
				}
			})
		</script>

除了通过这种方法，我们还能使用动态组件

<div id="app">
				<component :is="type"></component>
				<!-- <child-one v-if="type === 'child-one' "></child-one>
				<child-two v-if="type === 'child-two' "></child-two> -->
				<button @click="hdclick">change</button>
		</div>

能达到一样的效果
在如上的代码中，我们每点击一次change，vue的底层都对代码进行一次销毁，然后再呈现另一段代码，
在代码的内容不改变的情况下，这样的效率很低，我们可以使用v-once指令来提高静态页面的访问效率

Vue.component('child-one',{
				template: '<div v-once>child-one</div>'
			})

v-once指令表示只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。