首页 > 其他分享 >【前端学习笔记】Vue 3.0 带来的变化

【前端学习笔记】Vue 3.0 带来的变化

时间:2022-09-06 19:44:06浏览次数:83  
标签:组合式 逻辑 Vue 函数 Hooks 笔记 API 3.0

主要变化

  • 更小的体积和更快的速度

  • API设计的一致性增强

  • Typescript 支持

  • 开放更多底层 API

Composition API (Vue 2 则是 Options API)

原先学过一点 react ,对 react 中 hooks (钩子函数)的印象很深,比如 useState() 。Hooks是一个新的React特性提案,组件尽量写成纯函数,如果需要外部React特性(比如状态管理,生命周期),就用钩子把外部特性"钩"进来,通常函数名字都是以use开头。首次在v16.7.0-alpha版本中添加,v16.8.0中正式发布。

Hooks 的目的是解决难以跨组件复用状态逻辑的问题。Hooks 可以帮助开发者将含有状态的逻辑从组件中抽象出来。Vue 3.0 为了更好地复用代码,借鉴了 React 中的 Hooks,增加了组合式 API ,setup 是它的入口函数。setup 执行的时间在 beforeCreate 之前,内部不能使用 this ,关于这里提到的生命周期参考官方文档

组合式函数

vue 官方文档 给出了组合式函数的定义:在 Vue 应用的概念中,“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。有状态逻辑负责管理会随时间而变化的状态。一个简单的例子是跟踪当前鼠标在页面中的位置。在实际应用中,也可能是像触摸手势或与数据库的连接状态这样的更复杂的逻辑。想在多个组件中复用这个相同的逻辑,可以把这个逻辑以一个组合式函数的形式提取到外部文件中。

一句话总结:Vue 3 约定所有代码都组织在 setup 方法里面,通过组合式 API 分离相同功能的逻辑代码,并切割成各种模块导入导出使用。

扩展阅读

可以使用 arco-cli 新建一个项目,学习一下里面的代码。Arco Design Vue

标签:组合式,逻辑,Vue,函数,Hooks,笔记,API,3.0
From: https://www.cnblogs.com/joexu01/p/16663104.html

相关文章

  • zotero与obsidian笔记联动教程【转】
    主要参考链接https://blog.csdn.net/qq_43309940/article/details/125150487?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2~default~C......
  • vue3对比vue2获取通过refs获取组件数据
    vue21、组件设置ref标识<van-calendarref="calendarRef">2、在mounted中读取exportdefault{mounted(){//获取日历当前选择的时间constdat......
  • vuex源码分析
      什么是vuex是一个专为Vue.js应用程序开发的状态管理模式。什么是状态管理模式,vue根据data的变化会渲染模板,vuex则是把一些数据集中进行管理方便在vue组件中使......
  • Vue 中使用 moment 转换日期和时间
    Vue中使用moment转换日期和时间阳光的男夹克于2021-12-0113:31:45发布806收藏3分类专栏:Vue2文章标签:vue版权Vue2专栏收录该内容63篇文章3订阅订阅专栏......
  • 关于nodejs的一些笔记
    node.js和JavaScript还是有一定的渊源的简单来说,Nodejs就是运行在服务端的JavaScript浏览器有一个引擎比如谷歌的chrome里的叫做V8这个引擎可以翻译JavaScript脚本,然......
  • 创建 vue项目的详细步骤
    以vue2为例一、创建并初始化项目1、vscode打开一个空文件夹,打开终端2、终端运行:vuecreate【项目名】##注意项目名不要用驼峰标识,可以用“-”连接3、按上下键选择......
  • ar9485 win10 笔记本电脑 无线网间歇性掉线
    问题 新安装了系统,刚开始上网正常,下载东西或者待机一段时间后掉线了。wifi都能搜到,就是连不上,重启电脑可以解决,但是每次重启很麻烦,必须找到治本的方法。排除问题1、......
  • vue3项目的创建与初始化(vite)
    node:16版本npm:8版本一、创建1.以下代码:注意my-vue-app为即将创建项目的名字,可以自行更改#npm6.xnpmcreatevite@latestmy-vue-app--templatevue#npm......
  • vue3——toRaw 与 markRaw
    toRaw:作用:将一个由reactive生成的响应式对象转为普通对象。使用场景:用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新。markRaw:作......
  • vue大文件上传解决方案(500M以上)
    ​4GB以上超大文件上传和断点续传服务器的实现随着视频网站和大数据应用的普及,特别是高清视频和4K视频应用的到来,超大文件上传已经成为了日常的基础应用需求。但是在很......