Vue3 生命周期函数的新写法

柔光的暖阳◎ 2023-01-22 12:50 62阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Vue3 生命周期函数的新写法</title>
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
      <div id="root"></div>
    </body>
    <script>
    
      const app = Vue.createApp({
        // beforeMount => onBeforeMount
        // mounted => onMounted
        // beforeUpdate => onBeforeUpdate
        // beforeUnmount => onBeforeUnmount
        // unmouted => onUnmounted
        setup() {
          const {
            ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated,
            onRenderTracked, onRenderTriggered
          } = Vue;
          const name = ref('dell')
          onBeforeMount(() => {
            console.log('onBeforeMount')
          })
          onMounted(() => {
            console.log('onMounted')
          })
          onBeforeUpdate(() => {
            console.log('onBeforeUpdate')
          })
          onUpdated(() => {
            console.log('onUpdated')
          })
          // 每次渲染后重新收集响应式依赖
          onRenderTracked(() => {
            console.log('onRenderTracked')
          })
          // 每次触发页面重新渲染时自动执行
          onRenderTriggered(() => {
            console.log('onRenderTriggered')
          })
          const handleClick = () => {
            name.value = 'lee'
          }
          return { name, handleClick }
        },
        template: `
          <div @click="handleClick">
            {
       {name}}
          </div>
        `,
      });
      
      const vm = app.mount('#root');
    </script>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，62人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue3：生命周期（onErrorCaptured）

一、背景当项目如果发生报错，影响程序体验。如果能以捕获的方式得到错误信息，而且还能定位问题，这样就好了，本文介绍onErrorCaptured实现我们想要的效果。 vue

小鱼儿/ 2024年03月26日 17:48/ 0 赞/ 159 阅读

相关 Vue3生命周期

文章目录前言钩子函数代码展示 -------------------- 前言组件从创建到销毁的整个过程就是生命周期 ![请添加图片

古城微笑少年丶/ 2023年10月13日 08:52/ 0 赞/ 108 阅读

相关 Vue的生命周期（钩子）函数

> BeforeCreate 创建前 > > Created 创建后 > > BeforeMount 挂载前 > > Mounted 挂载完成 > > BeforeUp

男娘i/ 2023年10月09日 18:49/ 0 赞/ 195 阅读

相关 Vue生命周期相关函数

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

阳光穿透心脏的1/2处/ 2023年02月22日 10:39/ 0 赞/ 73 阅读

相关 Vue3 生命周期函数的新写法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

柔光的暖阳◎/ 2023年01月22日 12:50/ 0 赞/ 63 阅读

相关 Vue3.x 生命周期

Vue2中有 `beforeCreate` 、`created` 、`beforeMount` 、`mounted` 、`beforeUpdate` 等生命周期函数而在Vu

向右看齐/ 2022年12月25日 15:50/ 0 赞/ 238 阅读

相关 Vue生命周期的钩子函数

Vue生命周期的钩子函数目录 Vue生命周期的钩子函数一、前言二、生命周期图示三、钩子函数增加log

雨点打透心脏的1/2处/ 2022年10月26日 14:18/ 0 赞/ 427 阅读

相关 VUE3组合api的钩子函数生命周期

> 选项API生命周期选项和Composition API之间的映射 > beforeCreate------>使用setup() > created------>使用

缺乏、安全感/ 2022年09月08日 14:49/ 0 赞/ 255 阅读

相关 Vue生命周期钩子函数

Vue生命周期：Vue实例从创建到销毁的过程，称为Vue的生命周期； Vue生命周期示意图：[点击前往][Link 1] Vue钩子函数官方文档：[点击前往][Link 2

矫情吗；*/ 2021年07月25日 15:39/ 0 赞/ 697 阅读

相关 Vue生命周期钩子函数

一点睛 1 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个

小灰灰/ 2021年07月24日 21:58/ 0 赞/ 673 阅读