为什么尽管推出多年，Vue3的用户数量仍然较少？
1、Vue2中的setup实现方式
为什么Vue3相对于Vue2的优点对某些人来说不那么重要，并且有些人甚至不喜欢它？此外，Vue2本质上也可以实现Vue3的一些新特性，比如setup函数。在Vue2.7之前的版本中，只要你对Vue2的源码比较熟悉，就能制作类似的功能。这种提升技术水平的同时，也可以展示自己的能力，虽然并不是真正使用Vue3。以下是一个简单的例子，尽管还有些不完善。
<div>{{count1}}---{{count2}}---{{totalFixed2()}}</div>
// vue3写法 import {ref,onMounted,reactive, computed} from 'vue'; const info = reactive({ title: '对象' }); const count1 = ref(1); const count2 = ref(2); const total = computed(()=> count1.value + count2.value ); const add = ()=> count1.value++; const totalFixed = ()=> total.value.toFixed(2) const totalFixed2 = function(){ console.log(this); //无this return total.value.toFixed(2); } onMounted(()=>add())
// vue2写法
export default createSetup(vue=>{ const {ref,onMounted,reactive, computed,out} = vue; const info = reactive({ title: '对象' }); const count1 = ref(1); const count2 = ref(2); const total = computed(()=> count1.value + count2.value ); const add = ()=> count1.value++; const totalFixed = ()=> total.value.toFixed(2) const totalFixed2 = function(){ console.log(this); //有this可以拿，不用在引入一大堆乱七八糟的 $store, $router, $xxx啥的 return total.value.toFixed(2); } onMounted(()=>add()) out({ add, info, count1,count2,total,totalFixed,totalFixed2 }); })
// vue2 奇淫技巧， 制作一个setup导出器，就可以还原大部分vue3 setup的使用场景，这个只是例子，真要使用得完善好import Vue from 'vue';const createSetup = fun => { let vm = null; const refs = []; const ref = value => { const res = new Proxy({value},{ get(tg,k){ if(k !== 'value') return tg[k]; return vm && tg._k ? vm[tg._k] : tg[k]; }, set(tg,k,v){ tg[k] = v; if(k === 'value' && vm && tg._k) vm[tg._k] = v; return true; } }) refs.push(res); return res; } const mounteds = [] const onMounted = fun => mounteds.push(fun); const reactives = []; const reactive = obj => { reactives.push(obj); return obj; } const computeds = []; const computed = fun=>{ const res = new Proxy({value:undefined, _fun:fun},{ get(tg,k){ if(k !== 'value') return tg[k]; return vm && tg._k ? vm[tg._k] : tg[k]; } }) computeds.push(res); return res; } const out = obj=>{ Object.entries(obj).forEach(([k,v])=>{ const ref = refs.find(item=> item === v); const reactive = reactives.find(item=> item === v); const computed = computeds.find(item=> item === v); if(ref) { opts.data[k] = ref.value; ref._k = k; } else if(computed) { opts.computed[k] = computed._fun; computed._k = k; } else if(reactive) opts.data[k] = reactive; else if(typeof v === 'function') opts.methods[k] = v; }) } const opts = { data:{}, methods:{}, computed:{}, // 后续其他特性自己补 } return { beforeCreate(){ window.vm = this; vm = this; fun({ref, computed,onMounted, reactive, out }); vm.$options.data = ()=> opts.data; vm.$options.methods = opts.methods; vm.$options.computed = opts.computed; console.log(opts) }, mounted(){ mounteds.forEach(fun=> fun.call(this)); } }
2、hook思想
虽然hook是一种思想，但实际上在Vue2中也是可以实现的。例如，Vue2中的observable实际上对应着Vue3中的reactive。Vue3的hook虽然很强大，但在Vue2中也是可以实现的，就像前面提到的setup例子一样。然而，有些技术水平较低且不了解hook的人，错误地认为hook只存在于Vue3和React中，甚至不知道hook是什么。他们可能会在一个页面中堆砌大量不能复用的代码，而不把它们封装成hook。实际上，合理利用hook可以极大提高代码的可维护性和复用性。希望这些人能意识到这一点，并在下次编码时避免重复造轮子。
<div>{{ downCount.val }}</div>
import Vue from 'vue';// 封装倒计时hookconst useDownCount = ()=>{ const data = Vue.observable({val: 0}); let timer; data.start = ()=>{ data.stop(); data.val = 120; timer = setInterval(()=> { data.val-- if(data.val <= 0) data.stop(); },1000); } data.stop = ()=>{ clearInterval(timer); data.val = 0; } return data;}
export default{ data(){ return{ downCount: useDownCount(), } }, mounted(){ this.downCount.start(); } }
3、mixin使用
在Vue2中，有很多人对mixins的使用方法表示质疑，认为它容易造成代码混乱。实际上，问题并不在mixins本身，而是在于一些开发者没有找到适当的使用方式。如果只需要引入一两个方法，却将整个文件作为mixin引入，那么代码混乱就在所难免。正确的使用方法应该是根据需要精准引入所需的方法，避免过度使用mixin导致代码结构混乱。
//b.vueexport default{ data(){ return { name:1, age:2, height:3 } }, methods:{ setHeight(v){ this.height = v; }, setName(v){ this.name = v; } }}
// a.vueimport mixin from './b.vue';export default{ data(){ return{ // data这里我只要height，其他的我都不要，你其实mixin可以局部mixin 的嘛，思想放宽 height: mixin.data().height, width: 100, } }, methods:{ // 我只要setHeight, 这不就完事了， 这就叫mixin手动挡 setHeight: mixin.methods.setHeight, }}
以下是我个人不选择使用Vue3的理由：
1、多根组件
在Vue3中，多根组件的使用确实存在一些限制。例如，无法直接绑定class和style，也无法直接绑定事件。假设一个展示组件里有标题和内容，想要为其添加点击事件弹窗效果，或者修改背景色，由于多根组件不支持，就需要额外使用div进行包裹来实现所需功能，这给开发带来了一些不便。
//child.vue <div>1</div> <div>2</div>
//index.vue <div> <child class="child" @click="onClick" /> </div>
**多根组件限制**：在多根组件中无法直接绑定class、style和事件，需要额外的div包裹，增加了编码复杂度和冗余代码。
2. **setup函数引入过多**：每次都要引入setup所需的内容，调试变得繁琐。相比之下，在Vue2中可以直接将共用方法挂载在原型上，使得开发更便捷。
3. **无需typescript的支持**：个人觉得typescript对于自由灵活的编码方式并不必要，认为JavaScript的简单和灵活性更适合表达自己的想法，并享受编码带来的乐趣。
4. **Vue3源码复杂性**：对喜欢阅读和修改源码的开发者而言，Vue3源码过于复杂，让人望而生畏，不易上手改动和添加功能。
5. **性能优化提升不明显**：除非是处理超大型项目或爆表数据量的场景，普通项目很难感知到性能提升；同时，一些跑不动的情况，在Vue3下仍会存在。
6. **.value语法烦人**：容易忘记在响应式变量前加.value，导致错误报错，给开发带来不必要的麻烦和困扰。
7. **打包体积与网络速度**：Vue3打包体积小于Vue2，但对于现代网络速度来说，几十K的差异并不会对加载速度造成显著影响。
8. **频繁use导致代码冗余**：使用setup函数时，需要频繁引入use相关的内容，例如useRouter、useStore等，使得代码冗余且出现大量use声明，降低了代码的可读性。
9. **念旧**：作为习惯于Vue2开发的开发者，难以轻易放下对Vue2的熟悉和舒适感受，对于Vue3的新特性还保持着保守和念旧的态度。
以上是我不选择使用Vue3的主要理由。
- 发表于:
- 原文链接：https://page.om.qq.com/page/O7HSjvIPoSqU9BjsUoHmYHKQ0
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
