(五) -生命周期——客户端和服务端都调用-beforeCreate和created & create阶段仅客户端-$isServer

生命周期——客户端和服务端都调用-beforeCreate和created & create阶段仅客户端

生命周期钩子

需要注意的是，在任何 Vue 组件的生命周期内， 只有 beforeCreate 和 created 这两个方法会在 客户端和服务端被调用。其他生命周期函数仅在客户端被调用。

前后端都调用：

• beforeCreate
• created

在服务端渲染期间不被调用：

• beforeMount
• mounted
• beforeUpdate
• updated
• activated
• deactivated
• beforeDestroy
• destroyed

示例

在pages/index.vue中export default{}里展示生命周期

beforeCreate () {
    console.log('----------beforeCreate--------')
  },
  created () {
    // console.log(this)
    // 判断客户端执行   created就想在客户端执行，需要的操作
    if (!this.$isServer) {
      console.log('----------created--------')
    }
  },
  beforeMount () {
    console.log('----------beforeMount--------')
  },
  mounted () {
    console.log('----------mounted--------')
  },
  beforeUpdate () {
    console.log('----------beforeUpdate--------')
  },
  updated () {
    console.log('----------updated--------')
  },
  beforeDestroy () {
    console.log('----------beforeDestroy--------')
  },
  destroyed () {
    console.log('----------destroyed--------')
  },

查看页面，生命周期执行的方法在客户端还是服务端

created就想在客户端执行，需要的操作

created () {
    // console.log(this)
    // 判断客户端执行   created就想在客户端执行，需要的操作
    if (!this.$isServer) {
      console.log('----------created--------')
    }
  },

查看源码中的$isServer属性

create阶段从服务端——>客户端