onmounted vue3_Vue3.0语法快速入门,你会了吗

    作为前端开发者,这几天想必大家都看到了Vue3.0的beta版新闻了,是的,尤大大在4.17号微博晒出了Vue3.0的beta链接,不少FEer开始兴奋,不过也有不少其它声音:『我学不动了』、『这不就是React』『啥时候出正式版』;

Vue3.0-beta链接:https://github.com/vuejs/vue-next#status-beta

631c6a72fbbe51aa544edfacc5e07c21.png

那么首先,我们先简单看一下Vue发布版本的过程:

Alpha - Beta - RC - 正式

2e7e1a19be4bfe26a703c2b573d751a6.png

所以,从截图来看,还会经历RC阶段才会有正式版本能用,大家不要过于着急,目前尤大正在全力开发配套基础功能,比如脚手架、vue-router、以及生态插件等;

cf68d60bc21db7da82069adf447e3134.png

Vue3.0设计目标

  • 更小

  • 更快

  • 加强API设计一致性

  • 加强TypeScript支持

  • 提高自身可维护性

  • 开放更多底层功能

更小

  • 全局 API 和内置组件 / 功能支持 tree-shaking

  • 常驻的代码尺寸控制在 10kb gzipped 上下

更快

  • 基于 Proxy 的变动侦测,性能整体优于 getter / setter

  • Virtual DOM 重构

  • 编译器架构重构,更多的编译时优化

 提高自身可维护性

  • 代码采用 monorepo 结构,内部分层更清晰

  • TypeScript 使得外部贡献者更有信心做改动

Monorepo不了解可参考:https://juejin.im/post/5d9edb225188253e3377537c

对于我们开发者来讲,最关心的还是它的语法,实际上这块变化非常大。虽然目前是beta版本,但我们依然可以尝鲜,在本地创建Vue项目,并做一做Demo;

一、创建项目

// 先升级vue-cli到4.x版本cnpm install -g @vue/cli// 通过脚手架创建项目,一路回车vue create vue3.0

注:这一步实际上用的依然是2.x的版本

二、升级2.6到3.0beta版本

// 安装完vue/cli以后,可以使用vue add添加插件// 目前3.0对应的是vue-next项目vue add vue-next

安装完vue-next以后,我们就发现本地项目已经升级到了3.0. 

注:如果对vue add不了解,可以参考https://cli.vuejs.org/zh/guide/plugins-and-presets.html#%E6%8F%92%E4%BB%B6

打开main.js如图:

3c576025c3d8995509c8d0aa0ff50c14.png

左侧目录结构没有太大变化,main的语法却大不一样了;

前面我们提到Vue3.0更小,因为它支持Tree-Shaking,可以把每一个用到的API都抽取出来,通过上图我们发现,可以只解构出一个createApp函数,相比2.0简化了很多。

三、LifeCycle介绍(Hooks)

Vue3.0中,生命周期方法已经发生了很大变化,接下来我们对比一下:

原方法升级后
beforeCreatesetup
createdsetup
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeDestroy‍‍onBeforeUnmount
destroyedonUnmounted

四、Composition API介绍

实际上,起初定义的是Vue-Function-API,后经过社区意见收集,更名为Vue-Composition-API.

接下来,我们介绍几个变化大的Composition API:

  • reactive API

  • ref API

  • watch API变化

  • computed API变化

  • 生命周期钩子变化

  • TypeScript和JSX支持

reactive

作用:创建响应式对象,非包装对象,类似于在2.0的data中声明变量。

它本身一种Hooks能力,用过React Hook的,实际上就等同于useState();大家估计很好奇,为什么叫reactive? 让人莫名有一种你再抄袭React的感觉!

接下来,上硬菜:

// 打开 App.vue,删除多余代码  <div id="app">    <h1>{{title.name}}h1>  div>  
    // 此处可并列多个div,不再要求一个根元素了 </div>template><script>import { reactive } from 'vue'export default { name: 'App', setup(){ const title = reactive({ name:'欢迎学习Vue3.0' }) return { title } }}script>#app { text-align: center; color: #2c3e50; margin-top: 60px;}</style>

页面效果图:

53c32eb87f9b4b9c6d8662569eafdb91.png

Ref

作用:创建一个包装式对象,含有一个响应式属性value

它和reactive的差别,就是前者没有包装属性value

上硬菜:

<template>  <div id="app">    <h1>{{title.name}}h1>    <div>{{user}}div>  div>template><script>import { reactive,ref } from 'vue'export default {  name: 'App',  setup(){    const title = reactive({      name:'欢迎学习Vue3.0'    })    const user = ref('河畔一角');    //如果需要修改值,可通过value    user.value = '河畔老师'    return { title ,user }  }}script><style>#app {  text-align: center;  color: #2c3e50;  margin-top: 60px;}style>

效果图如下:

ab64fbec90788f48956f292fcdcfd7a2.png

事件处理

既然不用methods,那事件处理该怎么调用方法?

上硬菜

<template>  <div id="app">    <h1>{{title.name}}h1>    <div>{{user}}div>    <button @click="updateUser">修改名称button>  div>template><script>import { reactive,ref } from 'vue'export default {  name: 'App',  setup(){    const title = reactive({      name:'欢迎学习Vue3.0'    })    const user = ref('河畔一角');        const updateUser = ()=>{      //如果需要修改值,可通过value      user.value = '河畔老师'    }    return { title , user, updateUser }  }}script><style>#app {  text-align: center;  color: #2c3e50;  margin-top: 60px;}style>

效果图:

c3e2b59963474261ac059f17b8d947e1.png

onMounted/computed

作用:周期函数和计算函数

上硬菜:

<template>  <div id="app">    <h1>{{title.name}}h1>    <div>{{user}}div>    <button @click="updateUser">修改名称button>    <div>当前count:{{computedCount}}div>    <button @click="increment">修改countbutton>  div>template><script>import { reactive,ref,onMounted,computed } from 'vue'export default {  name: 'App',  setup(){    const title = reactive({      name:'欢迎学习Vue3.0'    })    const user = ref('河畔一角');    //如果需要修改值,可通过value        const updateUser = ()=>{      user.value = '河畔老师'    }        //生命周期方法    onMounted(()=>{      console.log('init mounted...')    })    // 初始化count值    const count = ref(0);    const increment = ()=>{      count.value++    }    // 调用计算属性函数Hook    const computedCount=computed(()=>count.value*10)    return { title , user, updateUser,count,increment,computedCount }  }}script><style>#app {  text-align: center;  color: #2c3e50;  margin-top: 60px;}style>

效果图:

67e9cf70c9d62c3330f5f66da06cc5bd.png

    经过以上几个API讲解,相信大家开始越来越激动了,确实整体语法发生了巨大的变化,写起来还挺有意思,语法简洁,但肯定会很别扭,因为不熟练;

    实际上语法远不止这些,包括父子传递、支持jsx语法等,我们这儿不做一一介绍了,大家可以自己通过第三方资料整理,了解更多Vue3.0的语法;

温馨提示:今晚9点30,尤大大再哔哩直播Vue3.0(4.21周二晚)

上述源码已经上传Github:https://github.com/JackySoft/vue3.0-demo

关注前端,关注未来,我是你的前端小帮手:前端未来

c3e52f62c2951ceb8d236db67e2f6b69.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值