简单对比vue3x和vue2x的区别

简单对比vue3x和vue2x的区别

简单总结vue 3.0的新特性 （仅有我能看懂的），食用本篇文章需要对vue2.0有一定的经验。

移除过滤器filters

• 删除了filters 并推荐使用computed代替计算属性，在2x中filters和computed有序多相似之处，这个不仅增加了学习成本也增加了维护成本，因此在3.0的中完全摒弃了filters。

生命周期的变化

• 生命周期的变化 新版本中增加了 新的生命周期函数，同时也去除了部分相似的生命周期函数 例如（update），新增 的有beforeUpdate和beforeUnmount 详情如下：
  bind → beforeMount
  inserted → mounted
  beforeUpdate:（新的！）这是在元素本身更新之前调用的，很像组件生命周期钩子
  update → （移除！）有太多的相似之处要更新，所以这是多余的，请改用 updated
  componentUpdated → updated
  beforeUnmount （新的！）与组件生命周期钩子类似，它将在卸载元素之前调用。unbind -> unmounted

多节点组件

• vue 3 支持多根节点组件
  在2.0中我们需要 在多组件外面在套一个div 作为父标签来防止用户意外创建多根组件时发出的警告，

<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

3.0 中我们可以这样写，但是这要求明我们确定义属性应该分布在哪里。

<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

• vue 3 中 引入了 全新的全局api。 在vue 2x中 有一些API 和配置可以全局改变 Vue 的行为 例如：Vue.component 可以创建组件 、Vue.directive 可以自定义指令 。

从技术上讲，Vue 2 没有“app”的概念，我们定义的应用程序只是通过 new Vue() 创建的根 Vue 实例。从同一个 Vue 构造函数创建的每个根实例共享相同的全局配置。 —官方文档引入

全局配置使得在测试期间很容易意外地污染其他测试用例。用户需要仔细存储原始全局配置，并在每次测试后恢复 (例如重置 Vue.config.errorHandler)。有些 API 像 Vue.使用 以及 Vue.mixin 甚至连恢复效果的方法都没有，这使得涉及插件的测试特别棘手。实际上，vue test utils 必须实现一个特殊的 API createLocalVue 来处理此问题. —官方文档引入

App的概念

vue 3x 中 有了app 的概念 导入createApp 返回一个应用实例。

import { createApp } from 'vue'

const app = createApp({})

组件之间共享配置

import { createApp } from 'vue'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const createMyApp = options => {
  const app = createApp(options)
  app.directive('focus' /* ... */)

  return app
}

createMyApp(Foo).mount('#foo')
createMyApp(Bar).mount('#bar')

key的变化

• key的变化 3x 中 v-if/v-else/v-else-if ， key不再是必须填写的了，新版的vue会自动生成唯一的key，但是如果自己手动传入了key，这个值必须是唯一的，不能使用重复的值。

< template v-for > 的 key 应该设置在 标签上 (而不是设置在它的子结点上)

<!-- Vue 3.x -->
<template v-for="item in list" :key="item.id">
  <div>...</div>
  <span>...</span>
</template>

按键修饰符的变化

• BREAKING：不再支持使用数字 (即键码) 作为 v-on 修饰符
  BREAKING：不再支持 config.keyCodes
  在js中已经废弃了KeyboardEvent.keyCode特性 3x中也不再支持这一特性
  MDN --KeyboardEvent.keyCode

<!-- Vue 3 在 v-on 上使用 按键修饰符 -->
<input v-on:keyup.delete="confirmDelete" />  

render的变化

2.0中render的写法中默认接收一个 h 作为参数如：

export default {
  render(h) {
    return h('div')
  }
}

但是在3.0中 h 是需要全局导入 且一般都是用在setup内部 如下：

import { h , reactive} from 'vue'
export default {
  setup(props, { slots, attrs, emit }) {
    const state = reactive({
      count: 0
    })

    function increment() {
      state.count++
    }

    // 返回render函数
    return () =>
      h(
        'div',
        {
          onClick: increment
        },
        state.count
      )
  }
}

文件总结的比较粗略，能力有限暂时就能看懂这么多。
参考官方文档：点击进入