Vue JS无法理解保持生命

本文介绍了Vue JS无法理解保持生命的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我正在使用以下代码进行测试： https：// jsfiddle。 net / b2qj69o1 / 25 /I'm doing tests with this code:https://jsfiddle.net/b2qj69o1/25/ <button v-for="tab in tabs" v-bind:key="tab.name" v-bind:class="['tab-button', { active: currentTab.name === tab.name }]" v-on:click="currentTab = tab" >{{ tab.name }}</button> <component v-bind:is="currentTab.component" class="tab" ></component>和js部分var tabs = [ { name: 'Home', component: function() { alert(); // test return new Promise((resolve, reject) => resolve({ template: '<div>Home component</div>' })) } }, { name: 'Posts', component: { template: '<div>Posts component</div>' } }, { name: 'Archive', component: { template: '<div>Archive component</div>', } }]new Vue({ el: '#dynamic-component-demo', data: { tabs: tabs, currentTab: tabs[1] }})我做了alert（）测试，看vue是否会重新渲染组件。我看到无论是否用< keep-alive> 包装< component> ，alert（）如果仅在我第一次进入首页标签时调用。因此，我有两个问题： 1.保持活动的确切含义是什么？造成该组件似乎只能被创建一次。 2. vue是否可以显示/隐藏选项卡，而不是替换单个DOM元素？I did the alert() test to see whether vue will re-render the component. I see that with or without wraping <component> with <keep-alive>, the alert() if called only the first time I enter the Home tab. So I have two questions:1. What exactly keep-alive does? cause it seems that anyway the component is created only once.2. Is it possible for vue to show/hide the tabs, instead of replacing single DOM element? But still not to load the component until it is shown.推荐答案您已经放置了 alert（ ）调用以异步方式返回组件定义的函数。仅在首次访问组件的定义时才调用此函数。You've put the alert() call in the function that asynchronously returns the component definition. This function will only get called the first time the definition of the component is accessed. < keep-alive> 标记将缓存组件的实例，这样它就不会被破坏并需要再次挂载。The <keep-alive> tag will cache an instance of a component so that it does not get destroyed and need to be mounted again.使用您的示例，您可以看到挂载钩子随时被调用您切换到首页标签：Using your example, you can see that the mounted hook gets called any time you switch to the "Home" tab:var tabs = [ { name: 'Home', component: function() { return new Promise((resolve, reject) => resolve({ template: '<div>Home component</div>', mounted() { console.log('mounted') } })) } }, { name: 'Posts', component: { template: '<div>Posts component</div>' } }, { name: 'Archive', component: { template: '<div>Archive component</div>', } }]new Vue({ el: '#dynamic-component-demo', data: { tabs: tabs, currentTab: tabs[1] }}).tab-button { padding: 6px 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid #ccc; cursor: pointer; background: #f0f0f0; margin-bottom: -1px; margin-right: -1px;}.tab-button:hover { background: #e0e0e0;}.tab-button.active { background: #e0e0e0;}.tab { border: 1px solid #ccc; padding: 10px;}<script src="https://unpkg.com/vue"></script><div id="dynamic-component-demo" class="demo"> <button v-for="tab in tabs" v-bind:key="tab.name" v-bind:class="['tab-button', { active: currentTab.name === tab.name }]" v-on:click="currentTab = tab" >{{ tab.name }}</button> <component v-bind:is="currentTab.component" class="tab" ></component></div>但是，通过将动态组件包装在< keep-alive> 标记中，告诉Vue缓存对本地路由组件的引用。因此，仅在首次实例化组件时才调用挂接的钩子：But, by wrapping the dynamic component in a <keep-alive> tag, you are telling Vue to cache a reference to the home route's component. So the mounted hook only gets called the first time the component is instantiated:var tabs = [ { name: 'Home', component: function() { return new Promise((resolve, reject) => resolve({ template: '<div>Home component</div>', mounted() { console.log('mounted') } })) } }, { name: 'Posts', component: { template: '<div>Posts component</div>' } }, { name: 'Archive', component: { template: '<div>Archive component</div>', } }]new Vue({ el: '#dynamic-component-demo', data: { tabs: tabs, currentTab: tabs[1] }}).tab-button { padding: 6px 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid #ccc; cursor: pointer; background: #f0f0f0; margin-bottom: -1px; margin-right: -1px;}.tab-button:hover { background: #e0e0e0;}.tab-button.active { background: #e0e0e0;}.tab { border: 1px solid #ccc; padding: 10px;}<script src="https://unpkg.com/vue"></script><div id="dynamic-component-demo" class="demo"> <button v-for="tab in tabs" v-bind:key="tab.name" v-bind:class="['tab-button', { active: currentTab.name === tab.name }]" v-on:click="currentTab = tab" >{{ tab.name }}</button> <keep-alive> <component v-bind:is="currentTab.component" class="tab" ></component> </keep-alive></div> 此处是使用< keep-alive> 标签和动态组件。Here's the documentation on using the <keep-alive> tag with dynamic components.关于第二个问题：如果您想最初将所有标签添加到DOM中并仅隐藏不活动的标签组件，然后使用 v-for 呈现每个标签指令，并使用 v-show 指令仅显示活动标签。As for your second question: if you want to add all of the tabs to the DOM initially and simply hide the inactive tab components, then render each tab using the v-for directive, and use the v-show directive to only show the active tab.以下是示例：var tabs = [ { name: 'Home', component: function() { return new Promise((resolve, reject) => resolve({ template: '<div>Home component</div>', })) } }, { name: 'Posts', component: { template: '<div>Posts component</div>' } }, { name: 'Archive', component: { template: '<div>Archive component</div>', } }]new Vue({ el: '#dynamic-component-demo', data: { tabs: tabs, currentTab: tabs[1] }}).tab-button { padding: 6px 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid #ccc; cursor: pointer; background: #f0f0f0; margin-bottom: -1px; margin-right: -1px;}.tab-button:hover { background: #e0e0e0;}.tab-button.active { background: #e0e0e0;}.tab { border: 1px solid #ccc; padding: 10px;}<script src="https://unpkg.com/vue"></script><div id="dynamic-component-demo" class="demo"> <button v-for="tab in tabs" v-bind:key="tab.name" v-bind:class="['tab-button', { active: currentTab.name === tab.name }]" v-on:click="currentTab = tab" >{{ tab.name }}</button> <component v-for="tab in tabs" v-bind:key="'component-' + tab.name" v-bind:is="tab.component" class="tab" v-show="currentTab === tab" ></component></div>并且，如果我正确理解了您的最后一句话，那么如果您真的不想在选项卡最初处于活动状态之前不创建选项卡组件，而是想在另一个选项卡处于活动状态时隐藏选项卡的HTML内容，则需要跟踪数据属性中已激活的选项卡，然后使用 v-if 指令最初阻止组件初始化。And, if I understand your last sentence correctly, if you really want to not create a tab component until the tab is initially active, but then want to hide the tab's HTML content when another tab is active, you'd need to keep track of which tabs have been activated in a data property and then use the v-if directive to initially prevent the component from initializing.类似这样的东西：var tabs = [ { name: 'Home', component: function() { return new Promise((resolve, reject) => resolve({ template: '<div>Home component</div>', })) } }, { name: 'Posts', component: { template: '<div>Posts component</div>' } }, { name: 'Archive', component: { template: '<div>Archive component</div>', } }]new Vue({ el: '#dynamic-component-demo', data: { tabs: tabs, currentTab: tabs[1], activatedTabs: {} }, watch: { currentTab: { immediate: true, handler(tab) { this.$set(this.activatedTabs, tab.name, true); } } }}).tab-button { padding: 6px 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid #ccc; cursor: pointer; background: #f0f0f0; margin-bottom: -1px; margin-right: -1px;}.tab-button:hover { background: #e0e0e0;}.tab-button.active { background: #e0e0e0;}.tab { border: 1px solid #ccc; padding: 10px;}<script src="https://unpkg.com/vue"></script><div id="dynamic-component-demo" class="demo"> <button v-for="tab in tabs" v-bind:key="tab.name" v-bind:class="['tab-button', { active: currentTab.name === tab.name }]" v-on:click="currentTab = tab" >{{ tab.name }}</button> <component v-for="tab in tabs" v-if="activatedTabs[tab.name]" v-bind:key="'component-' + tab.name" v-bind:is="tab.component" class="tab" v-show="currentTab === tab" ></component></div> 这篇关于Vue JS无法理解保持生命的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！