vue 2.+与vue3.+的区别

1. vue2和vue3双向数据绑定原理发生了改变

vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。

vue3 中使用了 ES6 的 ProxyAPI 对数据代理，它会将标记的属性转为proxy对象，然后监听变化操作proxy对象的set/get方法实现双向数据绑定。

 

相比于vue2.x，使用proxy的优势如下 　　

1.defineProperty只能监听某个属性，不能对全对象监听，而proxyAPI则可以监听整个对象 　　

2.可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可） 　　

3.可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

 什么是 ProxyAPI ？ ~>

 

2.移除过滤器filters

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

 

3.生命周期的变化

• 移除了beforeCreate（）和Created（）
• 新增了setup().
• 在剩余六个函数之前加入了on

（setup() 函数与vue3.2+的 script setup 是vue3中的一个大亮点）

 

4.支持多节点组件

在2.0中我们需要 在template标签内包一个div来防止用户意外创建多根组件时发出的警告，即

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

但在3.0中这样做不是必须的 。

 

5.typescript支持

vue3相比与vue2对TypeScript有更好的 支持度，并且vue3可以像react一样使用tsx语法：

import { defineComponent } from "vue";
import './style.less';

export default defineComponent({
  setup() {
    return () => {
      return <div class={'pdf'}>
        <iframe src="https://www.baidu.com" frameborder="0" style="width: 100%; height: 100%" ></iframe>
      </div>
    }
  }
})

 当然，更好的支持度是相对与vue2，在 jsx 中 template常用指令：v-html | v-text、v-if、v-for、v-model等是无法使用的，只能在{}中使用表达式实现相应的效果。

 

6.vue中的组织代码模式

在vue2中我们会在一个vue文件中methods，computed，watch，data中等等定义属性和方法，共同处理页面逻辑，我们称这种方式为 Options API 

但缺点是一个功能往往需要在不同的vue配置项中定义属性和方法，比较分散，项目小还好，清晰明了，但是项目大了后，一个methods中可能包括包含20多个方法，你往往分不清哪个方法对应着哪个功能

 

而在在vue3 Composition API 中，我们的代码是根据逻辑功能来组织的，一个功能所定义的所有api会放在一起(setup中)（更加的高内聚，低耦合），这样做，即时项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有API，而不像vue2 Options API 中一个功能所用到的API都是分散的，需要改动功能，到处找API的过程是很费劲的。

 

 

关于vue2中Options API 和 vue3中Composition API 的对比 ~>