<!DOCTYPE HTML> <HTML> <head> <Title></Title> <Meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" /> <script src="./vue.Js"></script> <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.Js"></script> --> </head> <body> <div ID="root"> <child-one v-if="type == ‘child-one‘"></child-one> <child-two v-if="type == ‘child-two‘"></child-two> <button @click="handlebuttonClick">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: "#root",data: { type: "child-one" },methods: { handlebuttonClick: function() { this.type = (this.type == "child-one" ? "child-two" : "child-one"); } } }) </script> </body> </HTML> 同样的效果，使用动态组件(点击切换会销毁一个组件，创建另一个组件。很显然，这样对性能是有损耗的)：
<!DOCTYPE HTML><HTML><head> <Title></Title> <Meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" /> <script src="./vue.Js"></script> <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.Js"></script> --></head><body><div ID="root"> //当然还可以用动态组件的方式(vue自带的标签，它指的就是一个动态组件)。动态组件的意思是：它会根据:is里面数据的变化自动加载不同的组件： <component :is="type"></component> <button @click="handlebuttonClick">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: "#root",data: { type: "child-one" },methods: { handlebuttonClick: function() { this.type = (this.type == "child-one" ? "child-two" : "child-one"); } } })</script></body></HTML> 为了解决频繁销毁-创建，可以用v-once(因为这个v-once，在切换的时候会把要销毁的这个放内存里了。也就是不需要创建了，直接从内存里拿)
<!DOCTYPE HTML><HTML><head> <Title></Title> <Meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" /> <script src="./vue.Js"></script> <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.Js"></script> --></head><body><div ID="root"> <!-- <child-one v-if="type == ‘child-one‘"></child-one> <child-two v-if="type == ‘child-two‘"></child-two> --> //当然还可以用动态组件的方式(vue自带的标签，它指的就是一个动态组件)。动态组件的意思是：它会根据:is里面数据的变化自动加载不同的组件： <component :is="type"></component> <button @click="handlebuttonClick">change</button></div><script type="text/JavaScript"> Vue.component("child-one",{ template: `<div v-once>child-one</div>` }); Vue.component("child-two",{ template: `<div v-once>child-two</div>` }); var vm = new Vue({ el: "#root",methods: { handlebuttonClick: function() { this.type = (this.type == "child-one" ? "child-two" : "child-one"); } } })</script></body></HTML> 总结 以上是内存溢出为你收集整理的动态组件与 v-once 指令全部内容，希望文章能够帮你解决动态组件与 v-once 指令所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）