vue3学习笔记1 - Vue2和 Vue3生命周期区别

1.vue2常用生命周期：
创建前：beforeCreate() 只有一些实例本身的事件和生命周期函数

创建后：Created() 是最早使用data和methods中数据的钩子函数

挂载前：beforeMount() 指令已经解析完毕，内存中已经生成dom树

挂载后：Mounted() dom渲染完毕页面和内存的数据已经同步

更新前：beforeUptate() 当data的数据发生改变会执行这个钩子，内存中的数据是新的，页面是旧的

更新后：Updated() 内存和页面都是新的

销毁前：beforeDestroy() 即将销毁data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作

销毁后：Destroyed() 已经销毁完毕

2.Vue3中生命周期函数的修改

     vue2                vue3
beforeCreate ->  使用 setup()
created ->           使用 setup()
beforeMount ->   onBeforeMount
mounted ->         onMounted
beforeUpdate -> onBeforeUpdate
updated ->          onUpdated
beforeDestroy -> onBeforeUnmount
destroyed ->        onUnmounted
errorCaptured -> onErrorCaptured

3.父子组件生命周期测试

 1 <script lang="ts">
 2 import {
 3   defineComponent,
 4   ref,
 5   onBeforeMount,
 6   onMounted,
 7   onBeforeUpdate,
 8   onUpdated,
 9   onBeforeUnmount,
10   onUnmounted,
11 } from 'vue'
12 export default defineComponent({
13   name: 'testChild',
14   props: {
15     msg: String,
16   },
17   // vue2.x中的生命周期钩子
18   beforeCreate() {
19     console.log('子组件中2.x 中的 beforeCreate ')
20   },
21   created() {
22     console.log('子组件中2.x 中的 created ')
23   },
24   beforeMount() {
25     console.log('子组件中2.x 中的 beforeMount ')
26   },
27   mounted() {
28     console.log('子组件中2.x 中的 mounted ')
29   },
30   beforeUpdate() {
31     console.log('子组件中2.x 中的 beforeUpdate ')
32   },
33   updated() {
34     console.log('子组件中2.x 中的 updated ')
35   },
36   // vue2.x中的beforeDestroy和destroyed这两个生命周期已经在vue3中改名了，所以不能再使用
37   beforeUnmount() {
38     // 已被废弃
39     console.log('子组件中2.x 中的 beforeUnmount ')
40   },
41   unmounted() {
42     console.log('子组件中2.x 中的 unmounted ')
43   },
44   setup() {
45     console.log('子组件中3.x中的 setup ')
46  
47     onBeforeMount(() => {
48       console.log('子组件中3.x 中的 onBeforeMount')
49     })
50     onMounted(() => {
51       console.log('子组件中3.x 中的 onMounted')
52     })
53     onBeforeUpdate(() => {
54       console.log('子组件中3.x 中的 onBeforeUpdate')
55     })
56     onUpdated(() => {
57       console.log('子组件中3.x 中的 onUpdated')
58     })
59     onBeforeUnmount(() => {
60       console.log('子组件中3.x 中的 onBeforeUnmount')
61     })
62     onUnmounted(() => {
63       console.log('子组件中3.x 中的 onUnmounted')
64     })
65  
66     return {
67  
68     }
69   },
70 })
71 </script>

父组件：

 1 import testChild from './testChild'
 2 export default {
 3   name: 'echartTest3',
 4   components: {
 5     testChild
 6   },
 7   setup () {
 8  
 9     let tmp = new Date();
10     console.log('父组件中的 setup ')
11     onBeforeMount(() => {
12       console.log('父组件中的 onBeforeMount')
13     })
14     onMounted(() => {
15       console.log('父组件中的 onMounted')
16     })
17     onBeforeUpdate(() => {
18       console.log('父组件中的 onBeforeUpdate')
19     })
20     onUpdated(() => {
21       console.log('父组件中的 onUpdated')
22     })
23     onBeforeUnmount(() => {
24       console.log('父组件中的 onBeforeUnmount')
25     })
26     onUnmounted(() => {
27       console.log('父组件中的 onUnmounted')
28     })
29     // 响应式的数据
30     const state = reactive({
31       count: 0,
32     })
33     
34     return {
35       ...toRefs(state),
36       name,
37       tmp
38     }
39   }
40 }
41 </script>

通过父组件更新数据将数据传输给子组件 

 

posted @ 2023-08-29 13:27  等风来灬  阅读(58)  评论(0)    收藏  举报