Use vue of the keep-alive

keep-alive: vue is a built-in component, the component can be included on hold or to avoid re-rendering . There are two life-cycle function: activated, deachtivated. After vue 2.1.0 version adds two attributes: include and exclude.

Life Cycle function (at the time of rendering the service side, the two hook function will not be called)

　　activated: activate the keep-alive component is called. If every time you enter the page for the latest data, we need to get data in the activated stage, undertake tasks originally created hook function to get data

　　deachitivated: Called when keep-alive components are discontinued.

Attributes

　　include：

　　　　Type: string (include = "") or expression (using v-bind: include = "")

　　　　Role: Only the component name matches will be cached

　　exclude ( priority> the include ):

　　　　Type: String (exclude = "") or expression (using v-bind: exclude = "")

　　　　Role: any component matching names will not be cached

　　max：

　　　　Type: Number

　　　　Role: Up to how much can the soul of the village component instance

Assembly cache instance

// add a component: 
Export default { 
  name: 'Keep-Alive-Test' , 
  Data () { 
    return { 
        includedComponents: "Keep-Alive-Test" 
    } 
  } 
} 


// Example:
 <= the include Keep-Alive "ABC "> 
    <! - component name = abc cache component -> 
    <component> </ component> 
</ Keep-Alive> 

<Keep-Alive the include =" a, B "> 
   <! - the dynamic binding component, the name is a buffer or components b -> 
    <component: iS = "a"> </ component> 
</ Keep-Alive> 


! <- using regular expressions, use the bind-V -> 
<Keep -alive: the include = "/ A | B /"> 
  <component :is="view"></component>
</keep-alive>

<!-- 动态判断 -->
<keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>

<keep-alive exclude="test-keep-alive">
  <!-- 将不缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>

Examples of the page buffer (binding vue-router)

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>


//  在router的index.js中配置 meta 元信息
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {
        keepAlive: false // 不需要缓存
      }
    },
    {
      path: '/page1',
      name: 'The Page1' , 
      Component: the Page1, 
      Meta: { 
        the keepAlive: to true  // to be cached 
      } 
    } 
  ] 
})

Hardships for the worst

Use vue of the keep-alive

Guess you like