javascript - Vue.js 对于 vue 组件仅 Hook 一次创建的事件

Question

问题

我遇到一个问题，created 事件 Hook 不断被调用。对于这种偶数，是否有任何类型的 Hook 一次，例如“首次创建”或“首次安装”？如果可能的话，不要为每个组件附加垃圾代码。

兴趣点

这里是一个示例，显示如果您从页面“foo”切换到“bar”，如何保持调用 created Hook (您需要检查页面才能查看日志)。

<强> JSFiddle

HTML

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- use router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- `<router-link>` will be rendered as an `<a>` tag by default -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
</div>

JS

const Foo = { template: '<div>foo</div>', created: function() { console.log('foo created'); } };
const Bar = { template: '<div>bar</div>', created: function() { console.log('bar created'); } };

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
];

const router = new VueRouter({
  routes // short for `routes: routes`
});

const app = new Vue({
  router
}).$mount('#app');

Answer 1

考虑包装您的<router-view></router-view>与 <keep-alive></keep-alive> ，这样当您的路由更改时，不会重新创建路由组件:创建的钩子(Hook)只会在最初创建时被调用一次。

<router-view>
  {({ Component }) => (
    <keep-alive>
      <Component />
    </keep-alive>
  )}
</router-view>