Vue 3.0 的重大改动暴露了哪些问题

vue升级的几大主要内容

• 内置方法模块化 import { value, computed, watch, onMounted } from 'vue'
• diff算法的重改，速度提升了6倍
• 加强typescript的支持
• 开放更多底层功能
• 当然最重要的还是 function based

function based 它做了哪些工作

function based主要代替mixins 首先对比mixins和function based的调用方法

mixins

mixins: [mixin]
复制代码

mixins 显然我们不知道它给我们提供了哪些方法和数据，造成了数据来源的不清晰，多个mixin的注入也会引起命名冲突的问题

function based

const { x, y } = useMouse()
复制代码

而 function based显然要我们将用到的东西先拿出来，那么就很好的解决了这些问题，而react的hooks也有解决这个问题的存在，高级组件显然也造成了数据来源不清晰的事情。结尾在比对react的hooks和vue的function based。这里不在过多阐述。

function based 暴露出vue的问题

如果function based只是为了代替mixing那么就这样就可以了。然而function based是为了更好的支持typescript所出现的。

先看看使用function based要怎么写组件，当然我相信3.0应该还会保留2.0的组件写法。

import { value, computed, watch, onMounted } from 'vue'

const App = {
  template: `
    <div>
      <span>count is {{ count }}</span>
      <span>plusOne is {{ plusOne }}</span>
      <button @click="increment">count++</button>
    </div>
  `,
  setup() {
    // reactive state
    const count = value(0)
    
    // computed 的不在有指定区域了，每个computed都要调用一个computed的函数包装了
    const plusOne = computed(() => count.value + 1)
    
    // method 也没有指定区域了
    const increment = () => { count.value++ }
    
    // watch 也没有指定区域了， 也要一个watch实际都要包装一个watch函数了
    watch(() => count.value * 2, val => {
      console.log(`count * 2 is ${val}`)
    })
    
    // lifecycle
    onMounted(() => {
      console.log(`mounted`)
    })
    
    // 2.0 的data
    return {
      count,
      plusOne,
      increment
    }
  }
}
复制代码

看着是不是更接近jsx了，想想react是不是也就是这样，各种方法都没有一个指定区域，要做什么自己去调用。

因为一个typescript组件的写法就大改了一次，那么会不会再出现一个东西使vue的写法又一次大改呢？为什么我不太担心react，我们先来看看react的写法

// 函数
function FriendListItem(props) {
    // 函数
  const isOnline = useFriendStatus(props.friend.id);

    // return出去的值
  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}
复制代码

是不是更像原生js，所有库，框架等等都会去兼容原生js这是肯定的，如果连原生js都不兼容那就不叫js库或者框架了。那么react的这种写法显然更容易引入各种库也得到各种库的兼容，从这次的typescript横空出世就看到了，react任他风吹雨打 我自岿然不动。而vue惨遭大改。

这也是我不得不担心vue下次是不是还会遭遇外部原因而出现比较大的变动

function based 和 react hooks的对比

从功能上看，大家都做到了逻辑复用去代替原先的mixins和高阶组件。也解决了原先的一些问题。

vue的function based第二个功能是去兼容typescript

react hooks是去模拟生命周期，尝试放弃class实例转向纯函数，大家应该都知道纯函数的性能要比class实例好一点，这也是官网只要去介绍了怎么去模拟生命周期，而不是把重点放在复用上。

vue对性能提升不错，也加入了更多的底层api，相信会对大家有所帮助，vue因typescript的修改也不得不让人深思。对于vue只兼容IE11个人是持无所谓的态度，本人也并不是一个保守派首先大家电脑里基本自带的都是IE11。至于IE8都在xp这类老系统里。至于一些个别部门需要IE8的需求，我们通常操起jq和webpack去做多页应用。vue2.x也就不了你。所以这块的变动其实对业务差别不多

当然vue对diff的升级显然会对性能有很大的提升，react应该会在之后把vue的diff思路运用到自己的diff里。对于社区一些人总会说vue抄谁谁谁的，我其实并不认同这个观点。后起之秀当然要参考老前辈的思路，加以运用和改造，别人自己闭门造车，想想都可怕。当然vue出了新思路，react也肯定会去参考。大家的目的都是为了社区更繁荣。

同时我也不喜欢别人说IE怎么怎么坏，你让chrome在xp中看看，估计也就那样