vue 组合式api的意义

2026-09-02

[Vue]浅谈Vue3组合式API带来的好处以及选项API的坏处

前言如果是经验不够多的同志在学习Vue的时候,在最开始会接触到Vue传统的方式(选项式API),后边会接触到Vue3的新方式 -- 组合式API.相信会有不少同志会陷入迷茫,因为我第一次听到新的名词时也陷入了困扰,所以,到底什么是组合式API呢? 选项式API的坏处代码碎片化通常在维护和开发一个组件时,分为 data.methods.computed.props 等.假如有一些业务在选项 API 的 data.methods.computed 中进行操作.把要关注的相同视角分别用不同颜色的

一篇文章讲明白vue3的script setup，拥抱组合式API！

引言 vue3除了Composition API是一个亮点之外,尤大大又给我们带来了一个全新的玩意 -- script setup,对于setup大家相信都不陌生,而对于script setup有些同学则表示难以理解,那么从现在开始,这一篇文章将让你一看就懂. ref与reactive 在setup中,我们拥有ref和reactive俩个api去创建一个响应式变量,这俩者存在的区别是ref是针对基本类型的响应,而reactive是针对引用类型的响应. import { ref, reactive

vue3组合式API

vue3组合式API 为什么要用组合式API,我们来看看它是如何解决vue2的局限性的 1.vue2的局限性当组件内容越来越多,逻辑越来越复杂,可读性就会降低,并且难以维护. vue2组件采用配置式API,props,data,methods等相关的配置会被放在一起,导致同样的功能块分散,并和其他的功能块混合.我们希望统一功能块的代码可以放在一起,增加可读性 vue2的代码复用机制存在缺点,(Mixins) 容易冲突依赖关系不明确,不易维护函数式的mixins不能在实例化过程中使用 vue

Vue3 组合式 API 中获取 DOM 节点的问题

模板引用 Vue 提供了许多指令让我们可以直接操作组件的模板.但是在某些情况下,我们仍然需要访问底层 DOM 元素.在模板中添加一个特殊的属性ref就可以得到该元素. 访问模板引用 <script setup> import { ref } from 'vue'; const demo = ref(null); onMounted(() => { demo.value.style.width = '20px'; }); </script> <template> &

关于基本类型值和引用类型值以及Vue官方API的array.$remove(reference)

今天又是孟哥解惑. 数组里的元素也是指向内存地址么? 这个要分情况的. 无论a[0],a[2]在什么地方,只要其值是基本类型值,就是值的比较,只要其值是引用类型(对象),就是内存地址的比较. Vue官方API:http://cn.vuejs.org/api/#array-_24remove_28reference_29,有个例子array.$remove(reference),参数是对象时,完全没问题,对于基本值,需要再测一下.保险起见,可以用array.splice(index, 1)方法,然

论vue项目api相关代码的组织方式

论vue项目api相关代码的组织方式看了下项目组同事的代码,发现不同项目有不同的组织版本版本一: ├─apis │ a.api.js │ b.api.js │ b.api.js │ d.api.js 每个api文件里都是这样的代码 // d.api.js import axios from '@/utils/http' export function editUser (Param) { return axios.post('url1', { ...Param }) } export fun

解决WebStorm无法正确识别Vue3组合式API的问题

1 问题描述 Vue3的组合式API无法在WebStorm中正确识别,表现为defineComponent等无法被识别: 2 尝试方案猜想这种问题的原因是无法正确识别对应的Vue3库,笔者相信WebStorm是可以做到的,只是某些配置没有正确,笔者尝试过在设置的Libraries中勾选上node_modules,但是没有效果. 3 解决办法最终的解决办法参考了此处(图源): 选择node_modules文件夹,右键选择Mark Directory as,最后选择Not Excluded即可.

Vue全局API总结

1.extend用于创建一个子类Vue,用$mount来挂载 <body> <div id="app"></div> <script> const app=Vue.extend({ template:'<p>{{a}} {{b}} {{c}}</p>', data:function(){ return { a:'Welcome', b:"To", c:"BeiJing" }

2017-10-29 用中文命名API的意义和途径

"中文编程"知乎专栏原链在前文对在代码中使用中文命名的质疑与回应中阐述了在代码中使用中文命名的益处. 此文将从软件使用者的角度阐述对API中文化的意义并探讨实现途径. 当然, 文中面向的用户是以中文为母语的开发者. 首先请看一个实例, 演示效果在此: 这个库提供了一系列绘图相关的API. 后者是笔者将这些API封装成了中文之后的对应代码. 此文的大前提是, 对以中文为母语的开发者, 中文接口版本的代码更易理解. API作为程序和程序之间交流的"语言", 在软件生态

对vue的api的研究

Vue.config 是一个对象,包含 Vue 的全局配置.可以在启动应用之前修改下列属性: silent 类型:boolean 默认值:false 用法: Vue.config.silent = true 取消 Vue 所有的日志与警告. optionMergeStrategies 类型:{ [key: string]: Function } 默认值:{} 用法: Vue.config.optionMergeStrategies._my_option = function (parent, c

vue封装API接口

第一步: 首先引入axios 然后创建两个文件夹api和http http.js 里面的 1 import axios from 'axios';//引入axios 2 3 //环境的切换开发环境(development)使用的是测试接口和生产环境(production)使用的是上线接口 4 if(process.env.NODE_ENV=='development'){ 5 //设置默认路径 6 axios.defaults.baseURL='http://120.53.31.103:8

vue全局API

一.Vue.extend() 顾名思义 extend 继承,官方给出的解释是 (使用基础 Vue 构造器,创建一个“子类”.参数是一个包含组件选项的对象.) Vue构造器是指 vue是一个构造函数, 所以在编写代码的时候被称之为构造器 Vue.extend() 看起来和new Vue() 有点像他们的区别在于 new Vue是一个实例 vue.extend 组件构造器需要传入component进行注册 vue.component直接注册组件内部已经自动构造了 <div id=ap

理解Restful api的意义

RESTful API 只是API的设计规范或者是一套设计理论. 单就URL和Method这两个点,你可以这样理解: URL 是用来唯一标示一个互联网资源的,而 Method 是用来标识当前请求对该资源进行什么操作. 你当然可以 GET http://www.xx.com/user?id=123 来删除一个用户,但这是不符合 RESTful API 规范的. 符合RESTful API规范应该是 DELETE http://www.xx.com/user/123. 这里 http://www.x

项目中使用vue的API。和项目的结构

PHP之如何编写一个Vue的API后台（一）

首先我们先建立文件的结构如下图: components - 存放所有的全局方法,比如:autoplay的函数 lib - 所有第三方的方法比如:DBTool:数据库的方法 logs - 日志 webroot - 整个api的入口文件,就是xxx.com访问的文件夹 config.php - 全局的设置 constant.php - 所有参数的设定,如 class SMS_USEFOR extends CONST_CLASS { const REGISTER = 1;//注册用验证码 co

vue基础api

vue比jq好处 1jq 频繁操作dom 增加了性能消耗 vue 模拟dom 从内存中拿 2jq 数据没有统一管理 vue 统一管理数据 3vue 组件开发可以提取出公共的html或js mv*好处 mvc m model 模型操作数据 v view 视图展示静态资源 c controller 控制器逻辑 mvp m model 模型操作数据 v view 视图展示静态资源 p 主持人(上面的mvc 中 mv可以互相调用所以改成 mvp让他不能互相调用) mvvm m mo

Vue UI API简单笔记

VUE UI 目录 VUE UI 一移动端常用UI组件库二 PC端常用UI组件库三 ElementUI组件按需引入一移动端常用UI组件库 Vant http://vant-contrib.gitee.io/vant/#/zh-CN/ Cube UI https://didi.github.io/cube-ui/ Mint UI http://mint-ui.github.io/#!/zh-cn (vue 2.0) NUT UI https://nutui.jd.com/#/ 二 PC端

第三十五篇:vue3,(组合式api的初步理解)

好家伙, 来一波核心概念:数据劫持是响应式的核心 1.由set up开始 (1)vue3中的一个新的配置项,值为一个函数. (2)组件中所用的到的:数据,方法,计算属性均要配置在set up中. (3)set up函数的两种返回值:1.若返回对象,则对象中的属性,方法可以在模板中直接使用, 2.返回函数(渲染函数) 注意:vue2和vue3的配置不要混用,set up不能访问到vue2的配置 2.ref函数作用:定义一个响应式数据 (把你的数据封装成一个对象,放在value里,使用get和se

Vue - slot-scope="scope" 的意义

<template slot-scope="scope"> <el-button type="primary" size="small" @click="$router.push(`/categories/edit/${scope.row._id}`)">编辑</el-button> <!-- $router.push() 跳转页面

都2022年了，你的前端工具集应该有vueuse

摘要:一款基于Vue组合式API的函数工具集. 本文分享自华为云社区<vueuse:我不许身为vuer的前端,你的工具集只有lodash!>,作者: 前端要摸鱼 . vueuse 是什么? 一款基于Vue组合式API的函数工具集. 以上是官方网站关于它的定义. 首先,它基于Vue Composition Api (组合式API),只有在支持组合式API的环境下,才可以正常使用它:什么是组合式API? 然后,它是一款函数工具集(可类比为lodash.js/ramda.js); 简单来说,这是一个

vue 组合式api的意义

热门专题