vue组件写法（vue3总结-组合式API）

时间2025-05-26 16:21:09分类IT科技浏览4077

导读：1.setup ...

1.setup

　　setup的两个传值: 父传子 , 子传父 , 父后代

2.ref函数

isRef: 检查一个值是否为一个 ref 对象

　　vue2和vue3响应式的原理(数据拦截)

3.reactive函数

isReactive: 检查一个对象是否是由reactive创建的响应式代理

ref与reactive的区别

从定义数据角度对比：

ref用来定义：基本类型数据。

reactive用来定义：对象（或数组）类型数据。

备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。

从原理角度对比：

ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。

reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。

从使用角度对比：

ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。

reactive定义的数据：操作数据与读取数据：均不需要.value。

4.计算属性

5.监视属性watch

6.watchEffect函数

7.生命周期

8.hook函数 [ 很重要 ]

9.toRef和toRefs

10.shallowReactive 和 shallowRef

11.readonly 和 shallowReadonly

isReadonly: 检查一个对象是否是由readonly创建的只读代理

12.toRaw和markRaw

13.customRef [ 实现防抖 ]

14.响应式数据做判断 :

isRef: 检查一个值是否为一个 ref 对象

isReactive: 检查一个对象是否是由 reactive 创建的响应式代理

isReadonly: 检查一个对象是否是由 readonly 创建的只读代理

isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

15.Teleport

16.Suspense

全局API的转移

Vue 2.x 有许多全局 API 和配置。

例如：注册全局组件、注册全局指令等。

//注册全局组件 Vue.component(MyButton, { data: () => ({ count: 0 }), template: <button @click="count++">Clicked {{ count }} times.</button> }) //注册全局指令 Vue.directive(focus, { inserted: el => el.focus() }

Vue3.0中对这些API做出了调整：

将全局的API，即：Vue.xxx调整到应用实例（app）上

2.x 全局 API（Vue） 3.x 实例 API (app) Vue.config.xxxx app.config.xxxx Vue.config.productionTip 移除 Vue.component app.component Vue.directive app.directive Vue.mixin app.mixin Vue.use app.use Vue.prototype app.config.globalProperties

2.其他改变

data选项应始终被声明为一个函数。

过度类名的更改：

Vue2.x写法

.v-enter, .v-leave-to { opacity: 0; } .v-leave, .v-enter-to { opacity: 1; }

Vue3.x写法

.v-enter-from, .v-leave-to { opacity: 0; } .v-leave-from, .v-enter-to { opacity: 1; }

移除keyCode作为 v-on 的修饰符，同时也不再支持config.keyCodes

移除v-on.native修饰符

父组件中绑定事件

<my-component v-on:close="handleComponentEvent" v-on:click="handleNativeClickEvent" />

子组件中声明自定义事件

移除过滤器（filter）

　　　　过滤器虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是 “只是 JavaScript” 的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。