mounted鉤子中使用$refs出現(xiàn)undefined

原因：如果在DOM結(jié)構(gòu)中的某個(gè)DOM節(jié)點(diǎn)使用了v-if、v-show或者v-for（即根據(jù)獲得的后臺(tái)數(shù)據(jù)來(lái)動(dòng)態(tài)操作DOM，即響應(yīng)式），那么這些DOM是不會(huì)再mounted階段找到的。
**解決方法：**如果說(shuō)mounted階段是加載階段，那么updated階段則是完成了數(shù)據(jù)更新到DOM的階段。在update階段使用this.$refs.xxx，就100%能找到該DOM節(jié)點(diǎn)。

vue 鉤子函數(shù)

created()與activated()

created()：在創(chuàng)建vue對(duì)象時(shí)，當(dāng)html渲染之前就觸發(fā)；但是注意，全局vue.js不強(qiáng)制刷新或者重啟時(shí)只創(chuàng)建一次，也就是說(shuō)，created()只會(huì)觸發(fā)一次；

activated()：在vue對(duì)象存活的情況下，進(jìn)入當(dāng)前存在activated()函數(shù)的頁(yè)面時(shí)，一進(jìn)入頁(yè)面就觸發(fā)；可用于初始化頁(yè)面數(shù)據(jù)等

keep-alive用法

<keep-alive>是Vue的內(nèi)置組件，能在組件切換過(guò)程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM。
include: 字符串或正則表達(dá)式。只有匹配的組件會(huì)被緩存。
exclude: 字符串或正則表達(dá)式。任何匹配的組件都不會(huì)被緩存。

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>

這樣就實(shí)現(xiàn)了有效的控制是否緩存。

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。