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中看看，估计也就那样