其他分享
首页 > 其他分享> > vue3生命周期

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中的beforeCreatecreated钩子,通过setup方法代替

 

 

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

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

 

 

 

 

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

标签:生命周期,console,log,onBeforeMount,钩子,component,vue3,onBeforeUnmount
来源: https://www.cnblogs.com/ygyy/p/16213259.html