1.全局API的转移

  • Vue 2.x 有许多全局 API 和配置。
    • 例如：注册全局组件、注册全局指令等。 ```javascript //注册全局组件 Vue.component(‘MyButton’, { data: () => ({ count: 0 }), template: ‘‘ })

//注册全局指令 Vue.directive(‘focus’, { inserted: el => el.focus() }

  1. Vue3.0中对这些API做出了调整：
  3. - 将全局的API，即：Vue.xxx调整到应用实例（app）上
  4. - ![image.png](https://cdn.nlark.com/yuque/0/2022/png/27402074/1659409362777-1979365b-6b68-45c5-8744-c3c3f677b686.png#clientId=ua43defb2-63f5-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=451&id=uc4a5b78c&margin=%5Bobject%20Object%5D&name=image.png&originHeight=676&originWidth=723&originalType=binary&ratio=1&rotation=0&showTitle=false&size=52738&status=done&style=none&taskId=uf3621788-113e-4e83-aec9-8e1a5f8e591&title=&width=482)
  5. <a name="SJiZc"></a>
  6. # 2.其他改变
  7. <a name="J577m"></a>
  8. ## ① data选项应始终被声明为一个函数
  9. <a name="Oh5q6"></a>
  10. ## ② 过渡类名的更改
  11. Vue2.x写法
  12. ```javascript
  13. .v-enter,
  14. .v-leave-to {
  15.   opacity: 0;
  16. }
  17. .v-leave,
  18. .v-enter-to {
  19.   opacity: 1;
  20. }

vue3

  1. .v-enter-from,
  2. .v-leave-to {
  3.   opacity: 0;
  4. }
  6. .v-leave-from,
  7. .v-enter-to {
  8.   opacity: 1;
  9. }

③ 移除keyCode作为 v-on 的修饰符，同时也不再支持config.keyCodes

④ 移除v-on.native修饰符

  • 父组件中绑定事件
    1. <my-component
    2. v-on:close="handleComponentEvent"
    3. v-on:click="handleNativeClickEvent"
    4. />
    子组件中声明自定义事件
    1. <script>
    2. export default {
    3.   emits: ['close']
    4. }
    5. </script>

    ⑤ 移除过滤器（filter）

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