【创作赢红包】vue3的setup的使用和原理解析

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进行类型标注

2.setup 

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

你可能感兴趣的:(Vue3,vue.js,前端,javascript)