YDOOK: vue3.0: vue-cli4.5: stup()与 各类钩子函数详细使用教程

---

1. vue3.0 钩子函数与 vue2.0 钩子函数的区别与对比：

vue3.0 钩子函数在 vue2.0 的基础上增加了 stup() 函数，该函数的作用声明周期时间发生在 vue2.0 钩子函数的 beforeCreate() 函数 和 created() 函数执行之前执行。创建的是data和method(). 也就是说：发生在：beforeCreate() 函数 和 created() 函数 之间的动作代码，之间写在 stup() 函数的第一层即可，不需要加函数名。

vue3.0 及 基于 vue3.0 的 vue-cli4.5 可以兼容使用 vue2.0 里面的钩子函数。只有使用 stup时，vue3.0 与 vue2.0 之间的钩子函数才有区别。

---

2. vue3.0 对 vue2.0 中的各个钩子函数的名称进行了改变，具体如下：

Vue2-----------> vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured

---

3. 在 stup() 函数里面也可以使用 vue3.0 的除了 stup() 函数外的其他钩子函数。

---

4. vue3.0 中的除 stup() 外的其他钩子函数需要放在 stup() 函数中使用，并在： export default { 外的前面声明 import。

---

5. vue2.0 钩子函数的使用位置：直接写在：export default { ：第一层内部：

export default {
  beforeCreate: function () {
    console.log('Enter beforeMount!'t)
  },
  created: function () {
    console.log('Enter created!'t)
  },
  beforeMount: function () {
    console.log('Enter beforeMount!'t)
  },
  mounted: function () {
    console.log('Enter mounted!'t)
  },
  beforeUpdate: function () {
    console.log('Enter beforeUpdate!'t)
  },
  updated: function () {
    console.log('Enter updated!'t)
  },
  beforeDestroy: function () {
    console.log('Enter beforeDestroy!'t)
  },
  destroyed: function () {
    console.log('Enter destroyed!'t)
  },
  activated: function () {
    console.log('Enter activated!'t)
  },
  deactivated: function () {
    console.log('Enter deactivated!'t)
  },
  errorCaptured: function () {
    console.log('Enter errorCaptured!'t)
  }
 
...
}

---

6. vue3.0 钩子函数的使用位置：直接写在：setup () { ：第一层内部：

export default {
  setup () {
    console.log('setup!')
    onBeforeMount(() => {
    	console.log('Vue3.0 Enter onBeforeMount!')
    }),
    onMounted(() => {
    	console.log('Vue3.0 Enter onMounted!')
    }),
    onBeforeMount(() => {
    	console.log('Vue3.0 Enter onBeforeMount!')
    }),
    onUpdated(() => {
    	console.log('Vue3.0 Enter onUpdated!')
    }),
    onBeforeUnmount(() => {
    	console.log('Vue3.0 Enter onBeforeUnmount!')
    }),
    onUnmounted(() => {
    	console.log('Vue3.0 Enter onUnmounted!')
    }),
    onActivated(() => {
    	console.log('Vue3.0 Enter onActivated!')
    }),
    onDeactivated(() => {
    	console.log('Vue3.0 Enter onDeactivated!')
    }),
    onErrorCaptured(() => {
    	console.log('Vue3.0 Enter onErrorCaptured!')
    })
  }
  
...
}

---

7. 使用 vue3.0 stup() 函数还需要在 《script》 的第一层内部上方引入对应的 vue组件：

<script>
import {
 	reactive,
  	toRefs,
  	onBeforeMount
	onMounted
	onBeforeUpdate
	onUpdated
	onBeforeUnmount
	onUnmounted
	onActivated
	onDeactivated
	onErrorCaptured
} from 'vue'

</script>

---

---