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 CSS菜单功能 改进版
Dec 20 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
js随机生成网页背景颜色的方法
Feb 26 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
jQuery实现高级检索功能
May 28 jQuery
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
js正则表达式简单校验方法
Jan 03 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
PHP4实际应用经验篇(3)
2006/10/09 PHP
smarty section简介与用法分析
2008/10/03 PHP
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
javascript实现根据3原色制作颜色选择器的方法
2015/07/17 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
简单介绍Python中的floor()方法
2015/05/15 Python
python 简单的多线程链接实现代码
2016/08/28 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
Python实现的双色球生成功能示例
2017/12/18 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
实例代码讲解Python 线程池
2020/08/24 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
python的数学算法函数及公式用法
2020/11/18 Python
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
十岁生日家长答谢词
2014/01/17 职场文书
开学典礼决心书
2014/03/11 职场文书
活动总结书
2014/05/08 职场文书
入党群众意见范文
2015/06/02 职场文书
思想工作总结范文
2015/08/12 职场文书
合作合同协议书
2016/03/21 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP