16 Vue 中动态组件与 v-once 指令实践

技术~子云

已于 2022-10-25 00:11:59 修改

阅读量655

点赞数

分类专栏： vue 文章标签： 1024程序员节 vue.js

于 2022-10-25 00:11:08 首次发布

本文链接：https://blog.csdn.net/davice_li/article/details/127505112

版权

vue 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

一、Vue中动态组件写在前面的例子，这个未使用动态组件。只是引出动态组件。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">

			<child-one v-if="type === 'child-one' "></child-one>
			<child-two v-if="type === 'child-two' "></child-two>
			<!-- 当点击change按钮时，会改变child-one和child-two 是否显示 -->
			<button @click='handleClick'>change</button>
			
		</div>

		<script type="text/javascript">
			Vue.component('child-one',{
				template:"<div>child-one</div>"
			})
			Vue.component('child-two',{
				template:"<div>child-two</div>"
			})

			var vm = new Vue({
				el: "#app",
				data:{
					type: 'child-one'
				},
				methods:{
					handleClick:function() {
						this.type = this.type ==='child-one' ?"child-two":"child-one"
					}
				}
			})
		</script>

	</body>
</html>

点击 chang按钮时，改变 child-one和child-two两个值。

二、使用动态组件 componet :is="type" 简化，父组件的代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<!-- 动态组件，type动态决定显示那个子组件 -->
			<componet :is="type"></componet>
			<!-- <child-one v-if="type === 'child-one' "></child-one>
			<child-two v-if="type === 'child-two' "></child-two> -->
			<!-- 当点击change按钮时，会改变child-one和child-two 是否显示 -->
			<button @click='handleClick'>change</button>
			
		</div>

		<script type="text/javascript">
			Vue.component('child-one',{
				template:"<div>child-one</div>"
			})
			Vue.component('child-two',{
				template:"<div>child-two</div>"
			})

			var vm = new Vue({
				el: "#app",
				data:{
					type: 'child-one'
				},
				methods:{
					handleClick:function() {
						// 三目运算符，如果this.type ==='child-one' 则返回child-two否则显示 child-one
						this.type = this.type ==='child-one' ?"child-two":"child-one"
					}
				}
			})
		</script>

	</body>
</html>

三、加入 v-once 每次创建完成后放到内存中，再次创建时在内存中获取，这样就提升了性能。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<!-- 动态组件，type动态决定显示那个子组件 -->
			<!-- <componet :is="type"></componet> -->
			<child-one v-if="type === 'child-one' "></child-one>
			<child-two v-if="type === 'child-two' "></child-two>
			<!-- 当点击change按钮时，会改变child-one和child-two 是否显示 -->
			<button @click='handleClick'>change</button>
			
		</div>

		<script type="text/javascript">
			// div 上加入了v-once 指令，在每次创建 完成后就会放到内存中。再切换过来时就不需要再创建新的组件
			Vue.component('child-one',{
				template:"<div v-once>child-one</div>"
			})
			// div 上加入了v-once 指令，在每次创建 完成后就会放到内存中。
			Vue.component('child-two',{
				template:"<div v-once>child-two</div>"
			})

			var vm = new Vue({
				el: "#app",
				data:{
					type: 'child-one'
				},
				methods:{
					handleClick:function() {
						// 三目运算符，如果this.type ==='child-one' 则返回child-two否则显示 child-one
						this.type = this.type ==='child-one' ?"child-two":"child-one"
					}
				}
			})
		</script>

	</body>
</html>