vue3.0 beta已出，来快速实践一下吧

最新推荐文章于 2024-04-08 15:39:04 发布

lookroot

最新推荐文章于 2024-04-08 15:39:04 发布

阅读量470

点赞数 2

分类专栏：教程文章标签： vue.js javascript typescript

本文链接：https://blog.csdn.net/qq_41689712/article/details/106338324

版权

vue3.0 beta已出，来快速实践一下吧

本文视屏
我的个人博客
vue3向下兼容vue2，vue2目前也是必学的

本节源码立即前往

前段时间尤大在哔哩哔哩直播了vue3的预览，来简单实践一下吧

api文档 Composition API RFC 立即前往
vue3地址立即前往

vue3的改变

更小更快
支持自定义渲染器
响应式修改为基于Proxy的侦测
深度结合typescript
基于treeshaking优化
…

创建项目😄

引入文件

克隆一个官方仓库

git clone https://github.com/vuejs/vue-next.git

打开这个项目，下载一下依赖,然后编译

npm i

npm run dev

编译文件在vue-next\packages\vue\dist,可以把它复制出来放到我们创建的项目文件夹

在vue-next\packages\vue\examples目录下有官方的示例

脚手架创建项目

首先确保你的@vue/cli为最新版本 vue -V

然后使用 vue create vue3demo创建一个vue项目，创建的时候勾选 vuex router

然后进入项目文件夹，命令行安装插件vue add vue-next将项目升级到vue3,打开package.json可以发现都升级到了最新版本

初始化你的第一个vue3程序⭐️

实例化

为了体验整个api的变化，我们先使用直接引入的方式体验效果,新建一个index.html 引入vue.global.js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.global.js"></script>
</head>

<body>
</body>

</html>

然后我们新建一个盒子用来挂载vue实例，新建一个模板当做根节点

<body>
    <div id='app'>
    </div>
    <template id="root">
        <div>
        </div>
    </template>
</body>

实例化一个vue3，vue3是按需引入，使用一个api之前需要先引入，通过createApp来实例化

<script>
    const {
   
        createApp
    } = Vue;
    const root = {
   
        template: '#root',
    }
    createApp(root).mount('#app');
</script>

setup

setup 函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。

vue3将更多的方法和数据在 setup函数中定义，这就是大家都觉得像react hook 的原因，其实实现的原理是不同的，只是写法有点像;这样做的目的就是为了更好的实现逻辑复用，具体会在后面举例

与 2.x 版本生命周期相对应的组合式 API

beforeCreate -> 使用 setup()
created -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted

最低0.47元/天解锁文章

lookroot

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
vue3.0 beta已出，来快速实践一下吧

vue3.0 beta已出，来快速实践一下吧本文视屏我的个人博客vue3向下兼容vue2，vue2目前也是必学的本节源码立即前往前段时间尤大在哔哩哔哩直播了vue3的预览，来简单实践一下吧api文档 Composition API RFC 立即前往vue3地址立即前往vue3的改变更小更快支持自定义渲染器响应式修改为基于Proxy的侦测深度结合typescript基于treeshaking优化…创建项目????引入文件克隆一个官方仓库git clone
复制链接

扫一扫