vue3生命周期

// vue2.x
export default {
  data () {
    return {}
  },
  methods: {
    ...
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {}
}

 

// vue3.x
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'

export default {
  setup() {
    onBeforeMount(() => {
      console.log('component is onBeforeMount')
    })
    onMounted(() => {
      console.log('component is onMounted')
    })
    onBeforeUpdate(() => {
      console.log('component is onBeforeUpdate')
    })
    onUpdated(() => {
      console.log('component is onUpdated')
    })
    onBeforeUnmount(() => {
      console.log('component is onBeforeUnmount')
    })
    onUnmounted(() => {
      console.log('component is onUnmounted')
    })
  }
}

2.x中生命周期钩子放在跟methods同级属性下

3.x中需要先导入钩子，然后在setup方法中注册钩子回调，并且钩子命名也跟React保持一样了

3.x移除了2.x中的beforeCreate和created钩子，通过setup方法代替

 

 

2.x中，vue template只允许有一个根节点

3.x中，vue template支持多个根节点，用过React的人应该知道<React.Fragment>和<></>

 

 

 

 

转:https://juejin.cn/post/6867123074148335624