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 相关文章推荐
JavaScript中的对象化编程
Jan 16 Javascript
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
JavaScript 新手24条实用建议[TUTS+]
Jun 21 Javascript
JS中字符串trim()使用示例
May 26 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 Javascript
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
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日期时间函数的高级应用技巧
2009/05/16 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
jquery里的each使用方法详解
2010/12/22 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
swiper4实现移动端导航切换
2020/10/16 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
python3.x上post发送json数据
2018/03/04 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
食品安全工作实施方案
2014/03/26 职场文书
幼儿园安全责任书
2014/04/14 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
市场部岗位职责范本
2015/04/15 职场文书
统招统分证明
2015/06/23 职场文书
2019年幼儿园管理条例范本!
2019/07/17 职场文书
vue+element ui实现锚点定位
2021/06/29 Vue.js