干货：Vue3 与 Vue2 的区别（详细）

Vue3 与 Vue2 的区别

代码书写格式的区别

vue2 的 options API

vue2 的 options API

// src/components/UserRepositories.vue

export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      repositories: [], // 1
      filters: { ... }, // 3
      searchQuery: '' // 2
    }
  },
  computed: {
    filteredRepositories () { ... }, // 3
    repositoriesMatchingSearchQuery () { ... }, // 2
  },
  watch: {
    user: 'getUserRepositories' // 1
  },
  methods: {
    getUserRepositories () {
      // 使用 `this.user` 获取用户仓库
    }, // 1
    updateFilters () { ... }, // 3
  },
  mounted () {
    this.getUserRepositories() // 1
  }
}

vue3 的 composition API

// src/components/UserRepositories.vue `setup` function
import { fetchUserRepositories } from '@/api/repositories'
import { ref } from 'vue'

// 在我们的组件中
setup (props) {
  const repositories = ref([])
  const getUserRepositories = async () => {
    repositories.value = await fetchUserRepositories(props.user)
  }

  return {
    repositories,
    getUserRepositories
  }
}

v-if 和 v-for 优先级的区别

vue3 中 v-if 比 v-for 优先级更高，而 vue2 中 v-for 优先级更高

vue3 使用 typeScript 重构

由于 vue3 使用 typeScript 重构了，所以对 ts 的类型提示特别友好

vue3 支持 hooks

mixin 由于会导致变量来源不明确等问题，所以 vue3 借鉴了 react 中很强大的 hooks

低情商：我们抄了 react 的 hooks

高情商：我一部分的灵感来自于 react 中的 hooks

其他区别

1. Vue3 组件上 v-model 用法已更改，以替换 v-bind.sync
2. v-bind=“object” 现在排序敏感
3. v-on:event.native 修饰符已移除
4. v-for 中的 ref 不再注册 ref 数组
5. functional attribute 在单文件组件 (SFC) 的 和 functional 组件选项中被废弃
6. 异步组件现在需要使用 defineAsyncComponent 方法来创建
7. 组件事件现在需要在 emits 选项中声明
8. 渲染函数 API 更改
9. $scopedSlots property 已移除，所有插槽都通过 $slots 作为函数暴露
10. $listeners 被移除或整合到 $attrs
11. $attrs 现在包含 class 和 style attribute
12. 自定义元素检测现在在模板编译时执行
13. 特殊的 is attribute 的使用被严格限制在被保留的 标签中
14. destroyed 生命周期选项被重命名为 unmounted
15. beforeDestroy 生命周期选项被重命名为 beforeUnmount
16. default prop 工厂函数不再可以访问 this 上下文
17. 自定义指令的 API 已更改为与组件生命周期一致，且 binding.expression 已移除
18. data 选项应始终被声明为一个函数
19. 来自 mixin 的 data 选项现在为浅合并
20. Attribute 强制策略已更改
21. 一些过渡的 class 被重命名
22. 不再默认渲染包裹元素
23. 当侦听一个数组时，只有当数组被替换时，回调才会触发，如果需要在变更时触发，则必须指定 deep 选项
24. 没有特殊指令的标记 (v-if/else-if/else、v-for 或 v-slot) 的 现在被视为普通元素，并将渲染为原生的 元素，而不是渲染其内部内容。
25. 已挂载的应用不会取代它所挂载的元素
26. 生命周期的 hook: 事件前缀改为 vnode-

被移除的 API

1. keyCode 作为 v-on 修饰符的支持
2. $on、$off 和 $once 实例方法
3. 过滤器 (filter)
4. 内联模板 attribute
5. $children 实例 property
6. propsData 选项
7. $destroy 实例方法。用户不应再手动管理单个 Vue 组件的生命周期。
8. 全局函数 set 和 delete 以及实例方法 $set 和 $delete。基于代理的变化检测已经不再需要它们了。