vue3的ref和reactive的区别（Vue3：探讨一下mixin）

一                、Vue2中的mixin

1  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
、定义要混入的数据对象

// 定义一个 mixin 对象 export const myMixin = { created() { this.hello() }, methods: { hello() { console.log(hello from mixin!) } } }

2















、在需要这些东西的地方去通过mixins获得mixin对象

<template> <div> <h1>我是页面1</h1> <h2>hello:{{ hello }}</h2> </div> </template> <script> import { myMixin } from @/mixin/test1.js export default { mixins: [myMixin], } </script> <style></style>

3
  
  
  
  
  
  
  
  、解决的问题（说作用可能更准确点）

vue2.x中
  
  
  
  
  
  
  
  ，mixin是将部分组件逻辑抽象成可重用块的工具 
  
  
  
  
  
  
  
 ，也就是重要的“复用                ”

4  
  
  
  
  
  
  
  
、存在的问题

mixin很容易发生冲突：因为mixin中的property都被合并到了一个组件中 


 


 


 


 


 


 


 


，同名的会被覆盖
 
 
 
 
 
 
 
 ，需要了解每一个选项默认的合并特性

数据来源不明确：如果你引入了多个mixin对象  
   
   
   
   
   
   
   
 ，那你想要知道其中一个具体方法
 


 


 


 


 


 


 


 

、属性等的来源无疑是很难查找的

可重用性有限：我们只能被动的使用mixin中传递的任何东西 

 

 

 

 

 

 

 

，而不能通过参数传递的方式来改变其中的某些逻辑

 

 

 

 

 

 

 

 ，这大大降低了它抽象逻辑方面的灵活性

5
 
 
 
 
 
 
 
 、vue2中mixin详解

请参考：Vue混入mixin_你吃香蕉吗？的博客-CSDN博客

二   
   
   
   
   
   
   
   
、Vue3中有mixin吗？需要mixin吗？

1
 

 

 

 

 

 

 

 
、结论：vue3中没有mixin                ，也不需要mixin

2

 

 

 

 

 

 

 

 、vue3中没有mixin？

如果大家在这之前看过vue3的官方文档 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

，那么大家就会发现















，在vue3的文档中提到mixin的地方极少无比                        ，所能找到的地方也只是在说vue2的一些写法之类的 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，那既然没写mixin























，大概率就在vue3中没有mixin了                ，接下来我们会肯定它没有mixin                。

官方很重要的一段话：为了解决Vue2存在的问题 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，我们添加了一种通过逻辑关注点组织代码的新方法：组合式 API  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
。

3                、vue3不需要mixin？

vue3相比较vue2来说















，它更加的接近函数式编程
  
  
  
  
  
  
  
  ，说白了就是写js 
  
  
  
  
  
  
  
 ，用写js的方式方法来写页面

提到这里我想大家应该能够想到一个关键词：公共

而上面所说也就是组合式API——Composition API

在Composition API中 


 


 


 


 


 


 


 


，我们可以抽离出每一个逻辑点为单独的js文件
 
 
 
 
 
 
 
 ，再通过import的方式去把页面的所有内容组合在一起  
   
   
   
   
   
   
   
 ，实现一个完整的页面















。

同样的 

 

 

 

 

 

 

 

，如果多个页面
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
、组件

 

 

 

 

 

 

 

 ，用到的方法















、变量都是同样的                ，那么我们可以把这一个js文件同时引入到多个文件中 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

，然后再进行使用















，这也就达到了mixin的效果                        ，甚至我们可以通过接受参数的方式对公共的方法作出定制化处理

三                        、Vue3中“Mixin  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
”的实践

1 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
、目录结构

 2























、index.vue

<template> <A></A> <B></B> </template> <script setup lang="ts"> import A from ./A.vue import B from ./B.vue </script>

3                、homeMixin.ts

export default function getHomeMixin(source: string) { let name = ref<string>(张三); const componentName = source const handleChangeName = (transmitName: string) => { name.value = transmitName } return { name, componentName, handleChangeName } }

4  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
、A















、B组件

A组件

<template> <div class="A"> <p>A组件</p> <p>minxin：{{ Mixin.name }}</p> <p>{{ Mixin.componentName }}</p> <el-button @click="Mixin.handleChangeName(法外狂徒-张三)">A组件改变mixin中得到的数据</el-button> </div> </template> <script setup lang="ts"> import getHomeMixin from ./homeMixin const Mixin = getHomeMixin(我是A组件传的值); </script> <style lang="less" scoped> .A { width: 300px; height: 300px; background-color: aquamarine; } </style>

B组件

<template> <div class="B"> <p>B组件</p> <p>minxin：{{ Mixin.name }}</p> <p>{{ Mixin.componentName }}</p> <el-button @click="Mixin.handleChangeName(尼古拉斯-赵四)">B组件改变mixin中得到的数据</el-button> </div> </template> <script setup lang="ts"> import getHomeMixin from ./homeMixin const Mixin = getHomeMixin(我是B组件传的值); </script> <style lang="less" scoped> .B { width: 300px; height: 300px; background-color: burlywood; } </style>

5
  
  
  
  
  
  
  
  、效果