Vue.js 只为一个 vue 组件钩住一次创建的事件

Question

题

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

兴趣点

这是一个示例，它显示了created如果您从页面“foo”切换到“bar”（您需要检查页面以查看日志），钩子如何继续被调用。

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>with包裹起来<keep-alive></keep-alive>，这样当你的路由改变时，路由的组件就不会重新创建： created 钩子只会在最初创建时调用一次。

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