组合式 API如何解决vue2中mixin的局限性？

Mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

// 定义一个mixin object
const myMixin = {created() {this.hello()},methods: {hello() {console.log('hello from mixin!')}}
}// 定义一个app使用这个 mixin
const app = Vue.createApp({mixins: [myMixin]
})app.mount('#mixins-basic') // => "hello from mixin!"

在 Vue 2 中，mixin 是将部分组件逻辑抽象成可重用块的主要工具。但是，他们有几个问题：

Mixin 很容易发生冲突：因为每个 mixin 的 property 都被合并到同一个组件中，所以为了避免 property 名冲突，需要了解其他每个特性。
可重用性是有限的：我们不能向 mixin 传递任何参数来改变它的逻辑，这降低了它们在抽象逻辑方面的灵活性。

组合式api:

<template><router-link to="/about">点这里去关于我们页面</router-link><div class="home">这里是一个计数器 >>> <span class="red">{{count}}</span> <br><button @click="countAdd">{{btnText}}</button></div>
</template><script>
// ref 是 vue 3.0 的一个重大变化，其作用为创建响应式的值
import { ref } from 'vue'
// 导出依然是个对象，不过对象中只有一个 setup 函数
export default {setup () {// 定义一个不需要改变的数据const btnText = '点这个按钮上面的数字会变'// 定义一个 count 的响应式数据，并赋值为 0const count = ref(0)// 定义一个函数，修改 count 的值。const countAdd = () => {count.value++}// 导出一些内容给上面的模板区域使用return {btnText,count,countAdd}}
}

组件不用写一堆东西了，只需要一个setup函数即可。

ref 这个函数，我们可以从vue中引入它，它传入一个值作为参数，返回一个基于该值的响应式 Ref 对象，该对象中的值一旦被改变和访问，都会被跟踪到，通过修改cout.value的值，可以触发模板的重新渲染，显示最新的值。

参考：https://cloud.tencent.com/developer/article/1633065

组合式 API如何解决vue2中mixin的局限性？相关推荐

Vue3组合式Api script setup模式中顶层使用await报Top-level ‘await‘ expressions are only allowed when the ‘module‘
今天练习Vue3的Suspense组件的时候碰到在Vue3组合式Api script setup模式中顶层使用await时报错Eslint错误(能正常编译),错误提示是: Top-level 'awa ...
vuejs中组件的两种不同的编写风格-选项式API及组合式API
前言随着vue3的逐渐稳定,以及周边生态的完善,现在vue3已经成为默认的使用方式了的所以,对于一个前端开发者,Vue2与Vue3都得要会,在vue3中新增很多东西,比如:Fragment,Tel ...
Vue3为什么要使用组合式API——Vue3的组合式API和Vue2的选项式API的优缺点
Vue3为什么要使用组合式API--Vue3的组合式API和Vue2的选项式API的优缺点 1.Vue2为什么使用选项式API 2.Vue2如何使用组合式API 3.组合式API Vs 选项式API ...
Vue3中的API——选项式API、组合式API
Vue 的组件可以按两种不同的风格书写:选项式 API 和组合式 API. 对于熟悉Vue2的人来说,选项式api是一个很好的选择,但Vue3提供的组合式api对于代码复用效果更为突出.博主之前是用的 ...
Vue2选项式API和Vue3组合式API的区别
文章目录 Vue2选项式API和Vue3组合式API的区别响应式处理组件生命周期组件通讯其他差异编译器的变化 TypeScript 静态类型提升 Vue2选项式API与Vue3组合式API ...
Vue3.0 组合式 API 分析与实践
本文带大家深入理解组合式 API 的设计详情,同时加入我们的实践经验总结. 01 背景 Vue3.x 版本的出现带来了许多令人眼前一亮的新特性,其中组合式 API(Composition API),一 ...
vue3组合式api
文章目录组合式API介绍什么是组合式 API? 为什么要有组合式 API? 更好的逻辑复用更灵活的代码组织 Option Api Option Api的缺陷 Composition Api 更好 ...
组合式Api 及相关操作用法
1.概念组合式 API (Composition API) 是一系列 API 的集合,使我们可以使用函数而不是声明选项的方式书写 Vue 组件. 2.用法 (1)使用组合式API的语法糖 setup ...
Vue3 中使用组合式API替换mixins，实现代码复用并解决隐患
我们在vue mixin混入–基础中聊过mixins可以使我们的代码进行复用,非常的灵活方便. 但是在vue3中却不推荐使用了,因为它存在一些问题. mixins问题不清晰的数据来源:当使用了多个 ...

组合式 API如何解决vue2中mixin的局限性？

组合式 API如何解决vue2中mixin的局限性？相关推荐

最新文章

热门文章