手机网站开发 1433端口错误,程序开发的基本步骤是什么?,求制作网站,免费咨询造成损害mounted钩子中使用$refs出现undefined
原因#xff1a;如果在DOM结构中的某个DOM节点使用了v-if、v-show或者v-for#xff08;即根据获得的后台数据来动态操作DOM#xff0c;即响应式#xff09;#xff0c;那么这些DOM是不会再mounted阶段找到的。 **解决方法#xff1…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-listVue.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中这样写
templatediv idappkeep-aliverouter-view v-if$route.meta.keepAlive//keep-aliverouter-view v-if!$route.meta.keepAlive/router-view/div
/templatescript
export default {name: App
}
/scriptstyle
/style这样就实现了有效的控制是否缓存。
activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的否则则不存在 当引入keep-alive的时候页面第一次进入钩子的触发顺序created- mounted- activated退出时触发deactivated。当再次进入前进或者后退时只触发activated。 事件挂载的方法等只执行一次的放在 mounted 中组件每次进去执行的方法放在 activated 中 activated 中的不管是否需要缓存多会执行。
