服务器之家

服务器之家 > 正文

vue3.0生命周期的示例代码

时间:2021-10-15 15:03     来源/作者:码奴吴彦祖

在组件化的框架中,比如Angular、React或Vue,都为组件定义了生命周期这个概念,每个组件实例在被创建时都要经过一系列的初始化过程,例如:需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时,在这个过程中也会运行一些叫做生命周期钩子的函数,它们提供给用户在组件的不同阶段添加自己的代码的机会。
使用过Vue2.x的朋友肯定对它的生命周期钩子很熟悉了,因为在实际的开发过程中我们多多少少会用到他们,比如 created、mounted、destoryed等等。而在Vue3.0中,Vue2.x Options API形式的生命周期钩子函数和新的Composition API都可以使用,来看个示例代码就明白了:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const { onMounted } = Vue
 
const MyComp = {
  
  // Options API
  mounted() {
    console.log('>>>>>> mounted 1')
  },
  
  setup() {
    // Composition API
    onMounted(() => {
      console.log('++++++ mounted 2')
    })
  }
}

两种形式的生命周期函数可以共存(当然实际使用的时候最好只选用一种),它们都会被执行。Composition API形式的生命周期函数都是在 setup 方法中被调用注册。
最后,在实际的开发过程中,请注意一下Options API形式的组件生命周期钩子和Composition API之间的实际对应关系:

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

整体代码如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
const { createComponent, createApp, reactive } = Vue
 
// 计数器组件
const Counter = {
  props: {
    initCount: {
      type: Number,
      default: 0
    }
  },
  template: `
    <div class="counter-display">
      <span class="counter-label">恭喜你,你已经写了</span>
      <span class="counter-text">{{ state.count }}</span>
      <span class="counter-label">斤代码!</span>
    </div>
    <div class="counter-btns">
      <button class="btn" @click="increase">写一斤</button>
      <button class="btn" @click="reset">删库啦</button>
    </div>
  `,
  // 相当于 vue2.x beforeCreated, created
  setup(props) {
    const countOps = useCount(props.initCount)
    console.log("Counter ===> 相当于 vue2.x 中 beforeCreated, created")
    return { ...countOps }
  },
  onBeforeMount() {
    console.log("Counter ===> 相当于 vue2.x 中 beforeMount")
  },
  onMounted() {
    console.log("Counter ===> 相当于 vue2.x 中 mounted")
  },
  onBeforeUpdate() {
    console.log("Counter ===> 相当于 vue2.x 中 beforeUpdate")
  },
  onUpdated() {
    console.log("Counter ===> 相当于 vue2.x 中 updated")
  },
  onBeforeUnmount() {
    console.log("Counter ===> 相当于 vue2.x 中 beforeDestroy")
  },
  onUnmounted() {
    console.log("Counter ===> 相当于 vue2.x 中 destroyed")
  },
  onErrorCaptured() {
    console.log("Counter ===> 相当于 vue2.x 中 errorCaptured")
  }
}
 
function useCount(initCount) {
  const state = reactive({ count: initCount })
  console.log("state reactive", state)
  const increase = () => { state.count++ }
  const reset = () => { state.count = 0 }
  return { state, increase, reset }
}
 
// 创建一个 跟组件 app
const App = createComponent({
  // 这个就相对于 在另一个 .vue 文件 引用 Counter 组件,需要在 components 属性局部注册组件
  components: {
    Counter,
  },
  // 挂载到 App 模板中
  template: `
    <div class="container">
      <h3>计数器示例</h3>
      <Counter />
    </div>
  `,
  setup() {
    console.log("App ===> 相当于 vue2.x 中 beforeCreated, created")
  },
  onBeforeMount() {
    console.log("App ===> 相当于 vue2.x 中 beforeMount")
  },
  onMounted() {
    console.log("App ===> 相当于 vue2.x 中 mounted")
  },
  onBeforeUpdate() {
    console.log("App ===> 相当于 vue2.x 中 beforeUpdate")
  },
  onUpdated() {
    console.log("App ===> 相当于 vue2.x 中 updated")
  },
  onBeforeUnmount() {
    console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
  },
  onUnmounted() {
    console.log("App ===> 相当于 vue2.x 中 destroyed")
  },
  onErrorCaptured() {
    console.log("Counter ===> 相当于 vue2.x 中 errorCaptured")
  }
})
 
// 启动
// container 就是相当于 new Vue() 中 el 元素
const container = document.querySelector("#app")
// createApp() 就是相当于 new Vue() 内部返回的就是 new Vue()
const app = createApp()
// 挂载组件
app.mount(App, container)

转载自:https://zhuanlan.zhihu.com/p/95968847

到此这篇关于vue3.0生命周期的示例代码的文章就介绍到这了,更多相关vue3.0生命周期内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!

原文链接:https://blog.csdn.net/kk2442687723/article/details/108749945

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部