美文网首页
生命周期

生命周期

作者: 0说 | 来源:发表于2021-04-12 22:36 被阅读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');
      }
    
    

    相关文章

      网友评论

          本文标题:生命周期

          本文链接:https://www.haomeiwen.com/subject/dlmflltx.html