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


Posted in Javascript onSeptember 24, 2020

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

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

整体代码如下:

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生命周期内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS常见问题整理(持续更新)
Aug 06 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
javascript常见用法总结
May 22 Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
AngularJS 自定义指令详解及示例代码
Aug 17 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
实例详解Node.js 函数
Jun 10 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
JS数组splice操作实例分析
Oct 12 Javascript
vue 函数调用加括号与不加括号的区别
Oct 29 Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 #Javascript
Vue3不支持Filters过滤器的问题
Sep 24 #Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 #Javascript
vue实现日历表格(element-ui)
Sep 24 #Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 #Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 #Javascript
vue-router 控制路由权限的实现
Sep 24 #Javascript
You might like
PHP 的几个配置文件函数
2006/12/21 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
星球大战与Python之间的那些事
2016/01/07 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
python爬虫超时的处理的实例
2018/12/19 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
Django的models中on_delete参数详解
2019/07/16 Python
python取均匀不重复的随机数方式
2019/11/27 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
python 追踪except信息方式
2020/04/25 Python
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
JPA的优势都有哪些
2013/07/04 面试题
大学生工作推荐信范文
2013/12/02 职场文书
日语专业毕业生求职信
2013/12/04 职场文书
财务担保书范文
2014/04/02 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
环卫工作汇报材料
2014/10/28 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
node快速搭建后台的实现步骤
2022/02/18 NodeJs