生命周期

2021-04-12  本文已影响0人  0说
生命周期

  nuxtServerInit 
    应用场景是对 store 操作

  middleware 
    nuxt.config.js => 匹配布局 =>  匹配页面
  
  validate
    参数校验,校验失败,跳转到错误的页面


 middleware() {
    // console.log(window) 报错
    console.log('middleware page')
  },
  // 参数的有效校验
  validate({ parmas, query }) {
    // 完成校验业务
    return true
  },
  // 读数据 返回给目标组件
  asyncData(context) {
    // 异步业务逻辑,读取服务端数据
    console.log('asyncData', this)
    return {
      b: 2
    }
  },
  // 读数据  提交给vuex
  fetch({ store }) {
    // 异步业务逻辑,读取服务端数据提交给vuex
    console.log('fetch');
  },
  // 以上是在服务端运行   客户端一些对象是没办法拿到 window 访问不了 this
  data() {
    a: 1
  },
  // beforeCreate 、 created 运行在客户端跟服务端 服务端会先运行
  // 所以是拿不到window 可以访问this 这边的this会有服务端跟客户端的
  beforeCreate() {
    console.log('beforeCreate', this);
  },
  created() {
    console.log('created');
  },
  // 剩下的生命周期 运行在客户端 可以访问this
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  }

上一篇下一篇

猜你喜欢

热点阅读