这是我参与新手入门的第1篇文章。

vue3发布有段时间了，但一直没来得及系统学习。vue是我司项目开发使用的主要框架，因此今后的项目升级到vue3也是迟早的事，对vue3的学习也是迫在眉睫。此文主要记录在阅读vue3文档时发现的一些跟vue2不同的用法，以及此前的开发中未曾注意到的知识点。

重要变动

下边列出的是针对我日常的工作内容，比较重要的一些变动。工作中一些项目使用的是script标签引入的方式使用vue，升级之后一些写法将不再兼容

• 创建应用实例时，统一使用createApp，不再使用new Vue()，视为创建“根组件”

  const app = Vue.createApp({}).mount('#app');
  

• 应用的data属性不能再声明为对象，而应和组件一样，声明为一个function，返回实例的属性。

  const app = Vue.createApp({
          data() {
                  return {
                          name: 'abc',
                          list: []
                  }
          }
  });
  const vm = app.mount('#app');
  

• v-for与v-if优先级变动

  <!-- This will throw an error because property "todo" is not defined on instance. -->
  
  <li v-for="todo in todos" v-if="!todo.isComplete">
    {{ todo }}
  </li>
  

  在2.x版本中，v-for 的优先级高于 v-if，而在3.x中则相反，v-if 的优先级高于 v-for，这意味着，v-if 将无权限访问 v-for 中的变量。

  若依然想让v-for优先级更高，可以使用<template>标签

  <template v-for="todo in todos">
    <li v-if="!todo.isComplete">
      {{ todo }}
    </li>
  </template>
  

• 3.0版本删除了过滤器，不再支持

  虽然过滤器很方便，但它需要一个自定义语法，打破大括号内表达式是“只是 JavaScript”的假设，这不仅有学习成本，而且有实现成本。 组件内的过滤器建议使用计算属性或调用方法来实现。全局过滤器可使用全局属性来实现。

其他变动

• 组件的注册，不再限制组件只能有一个根元素

  app.component('custom-layout', {
    template: `
      <header>...</header>
      <main v-bind="$attrs">...</main>
      <footer>...</footer>
    `
  });
  

  vue2.x中，如果组件的html代码最外层没有包裹在一个标签中，则会报错。vue3取消了这个限制。个人感觉这一改动十分人性化。

• data以$data的形式存储在组件实例中，也可直接通过组件实例访问。如下：

  console.log(vm.$data.name); // 'abc'
  console.log(vm.name); // 'abc'
  
  //修改其中一个，另一个也会更新
  
  vm.name = 'abcd';
  console.log(vm.$data.name); // 'abcd'
  
  vm.$data.name = 'xyz';
  console.log(vm.name); // 'xyz'
  

  Vue 使用$前缀通过组件实例暴露自己的内置 API。它还为内部 property 保留_前缀。你应该避免使用这两个字符开头的的顶级 data property 名称。

• 使用emits定义自定义事件

  app.component('custom-form', {
    emits: ['in-focus', 'submit']
  })
  

  对组件的自定义事件进行集中定义，便于更好的记录与管理组件的功能。同时，类似于组件的prop，可对自定义事件添加校验规则，拦截非法的事件调用。注意：emits中定义的原生事件的同名事件，会替换掉原生事件。

  建议定义所有发出的事件，以便更好地记录组件应该如何工作。

• v-on多事件处理器

  <button @click="one($event), two($event)">
    Submit
  </button>
  

  事件处理程序中可以有多个方法，方法名间用逗号分隔

• 过渡动画：过渡动画的class名称有一些变更，主要为v-enter变更为v-enter-from，v-leave变更为v-leave-from，功能不变。

• 生命周期变动

结尾

先总结这些。

这是发掘金的第一篇文章，着实艰难。先记录一些比较简单易懂的更新，关于组合式API，响应性原理相关的更新，根据以后实际项目经验再单读写学习笔记。最近工作也比较忙，希望接下来能尽快将vue3应用于实际项目开发中。