mounted鉤子中使用$refs出現undefined

原因：如果在DOM結構中的某個DOM節點使用了v-if、v-show或者v-for（即根據獲得的后臺數據來動態操作DOM，即響應式），那么這些DOM是不會再mounted階段找到的。
**解決方法：**如果說mounted階段是加載階段，那么updated階段則是完成了數據更新到DOM的階段。在update階段使用this.$refs.xxx，就100%能找到該DOM節點。

vue 鉤子函數

created()與activated()

created()：在創建vue對象時，當html渲染之前就觸發；但是注意，全局vue.js不強制刷新或者重啟時只創建一次，也就是說，created()只會觸發一次；

activated()：在vue對象存活的情況下，進入當前存在activated()函數的頁面時，一進入頁面就觸發；可用于初始化頁面數據等

keep-alive用法

<keep-alive>是Vue的內置組件，能在組件切換過程中將狀態保留在內存中，防止重復渲染DOM。
include: 字符串或正則表達式。只有匹配的組件會被緩存。
exclude: 字符串或正則表達式。任何匹配的組件都不會被緩存。

import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/home/home' import Header from '@/components/home/header' import Citylist from '@/components/city/city-list'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Home',component: Home,meta: {keepAlive: true // 需要被緩存}},{path: '/Header',name: 'Header',component: Header,meta: {keepAlive: true // 需要被緩存}},{path:'/citylist',name:'citylist',component:Citylist,meta: {keepAlive: false // 不需要被緩存}}] })

在app.vue中這樣寫：

<template><div id="app"><keep-alive><router-view v-if="$route.meta.keepAlive"/></keep-alive><router-view v-if="!$route.meta.keepAlive"></router-view></div> </template><script> export default {name: 'App' } </script><style> </style>

這樣就實現了有效的控制是否緩存。

activated,deactivated這兩個生命周期函數一定是要在使用了keep-alive組件后才會有的，否則則不存在
當引入keep-alive的時候，頁面第一次進入，鉤子的觸發順序created-> mounted-> activated，退出時觸發deactivated。當再次進入（前進或者后退）時，只觸發activated。
事件掛載的方法等，只執行一次的放在 mounted 中；組件每次進去執行的方法放在 activated 中， activated 中的不管是否需要緩存多會執行。

總結

以上是生活随笔為你收集整理的vue开发问题积累的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。