引言：vue3更精准的变更通知

一、双向绑定的更新：

• 1、vue2 的双向数据绑定是利⽤ES5 的⼀个 API ，Object.definePropert()对数据进⾏劫持结合发布订阅模式的⽅式来实现的。
• 2、vue3 中使⽤了 es6 的 ProxyAPI 对数据代理，使⽤ref（基本数据）或者reactive（引用数据）将数据转化为响应式数据通过 Proxy 监听属性的变化，从⽽实现对数据的监控。
• 3、使用proxy的原因或者优势：
• • 1.defineProperty只能监听某个属性，不能监听对象的属性的变化；
• • 2.可以监听数组，不用再单独的对数组做特异性操作，Proxy可以直接拦截所有对象类型的操作，完美支持对数组的监听。

二、setup

• vue2是单独的配置项
• vue3是
• • 1、包含在setup配置项内部，然后再统一return出去
• • 2、setup语法糖

<script>
// 1、vue2 不同的配置项单独分开管理
export default {
  data() {
    return {
      msg: 'hello world',
    };
  },
  methods: {
    changeMsg() {
      this.msg = 'hello juejin';
    },
  },
};
</script>

--------------------------------------------

<script>
// 2、vue3 利用setup配置项将相关逻辑都放到一起，更接近原生js开发
import { ref, defineComponent } from 'vue';
export default defineComponent({
  setup() {
    const msg = ref('hello world');
    const changeMsg = () => {
      msg.value = 'hello juejin';
    };
    return {
      msg,
      changeMsg,
    };
  },
});
</script>

--------------------------------------------

<script setup>
// 3、setup 语法糖让变量和方法不用在写return
import { ref } from 'vue';

const msg = ref('hello world');
const changeMsg = () => {
  msg.value = 'hello juejin';
};
</script>

三、文件内容的区别：

• 1、vue2中直接创建vue实例；
• 2、vue3中按需导出createApp
• 3、vue3中的单文件不再要求必须有根元素

四、生命周期：