您现在的位置是:首页 > 技术教程 正文

vue3的setup的使用和原理解析

admin 阅读: 2024-04-02
后台-插件-广告管理-内容页头部广告(手机)

1.前言

最近在做vue3相关的项目,用到了组合式api,对于vue3的语法的改进也是大为赞赏,用起来十分方便。对于已经熟悉vue2写法的同学也说,上手还是需要一定的学习成本,有可能目前停留在会写会用的阶段,但是setup带来哪些改变,以及ref,reactive这两api内部实现原理到底是什么,下面先来总结:

setup带来的改变:

1.解决了vue2的data和methods方法相距太远,无法组件之间复用

2.提供了script标签引入共同业务逻辑的代码块,顺序执行

3.script变成setup函数,默认暴露给模版

4.组件直接挂载,无需注册

5.自定义的指令也可以在模版中自动获得

6.this不再是这个活跃实例的引用

7.带来的大量全新api,比如defineProps,defineEmits,withDefault,toRef,toRefs

ref带来的改变:

Vue 提供了一个 ref() 方法来允许我们创建可以使用任何值类型的响应式数据

Ref作TS的类型标注

reactive带来的改变:

可以使用 reactive() 函数创建一个响应式对象或数组

reactive可以隐式地从它的参数中推导类型

使用interface进行类型标注

需要了解vue2和vue3区别的可以查看我的这篇文章:

vue2和vue3的区别(由浅入深)_KinHKin(五年前端)的博客-CSDN博客_vue2开发好还是vue3开发好Vue2使⽤的是选项类型API(Options API),Vue3使⽤的是合成型API(Composition API)Vue3:数据和⽅法都定义在setup中,并统⼀进⾏return{}vue2和vue3比较还是有很多不一样的地方,比如setup语法糖的形式最为便捷而且更符合开发者习惯,未来vue3将会大面积使用这种规则,这样更加符合开发习惯和降低后续维护的成本,还有目前Vue3已经成为了Vue的默认版本,后续维护应该也会以Vue3为主。希望各位同学赶紧学起来吧~......https://blog.csdn.net/weixin_42974827/article/details/126560362?spm=1001.2014.3001.5502

%20 2.setup%20

在 setup() 函数中手动暴露大量的状态和方法非常繁琐。幸运的是,我们可以通过使用构建工具来简化该操作。当使用单文件组件(SFC)时,我们可以使用  来大幅度地简化代码。

%20

 中的顶层的导入和变量声明可在同一组件的模板中直接使用。你可以理解为模板中的表达式和  中的代码处在同一个作用域中。

%20

里面的代码会被编译成组件%20setup()%20函数的内容。这意味着与普通的 

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索