Vue2与Vue3的区别

根节点不同

vue2，根节点必须唯一。

<template>
     <div>
          内容
     </div>
</template>

vue3,不会考虑这个问题，可以多模块书写。

<template>
    <div>
         内容
    </div>
    <div>
         内容
    </div>
</template>

响应式数据定义不同

首先，vue2与vue3在脚手架的安装上，就有很大的区别

vue2，使用命令 npm install -g @vue/cli

vue3，使用命令 npm create vite@latest

响应式数据定义上，vue2把数据放入 data 函数，便成为响应式数据

//vue2写法
<template>
    <h1>{{ title }}</h1>
</template>
<script>
  export default {
    data() {
      return {
        title: "Hello, Vue!"
      };
   }
  };
</script>

vue3中，要导入{ref, reactive, toRefs}，const 返回值-响应式数据 = ref（响应式数据）

<template>
  <h1>{{ title }}</h1>                 // 直接使用 title
  <h2>{{ data.author }}</h2>
  <h2>{{ age }}</h2>
</template>

<script>
 import { ref, reactive, toRefs } from "vue";
   export default {
    setup() {
      const title = ref("Hello, Vue 3!");
      const data = reactive({
        author: "sheben",
        age: "20"
      });
      const dataAsRefs = toRefs(data)
      const { age } = dataAsRefs
      setTimeout(() => {
        title.value = "New Title";   
      }, 5000);
      return { title, data };
    }
  };
</script>

双向绑定原理不同

vue2，使用 Object.definePropert()原理，遍历每一个对象

vue3，采用proxy原理，可直接监听数组类型的数据变化 性能的提升 监听的目标为对象本身，可直接实现对象属性的新增/删除

diff算法不同

vue2 diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。 vue2 diff算法会比较每一个vnode,而对于一些不参与更新的元素，进行比较是有点消耗性能的。

vue3 diff算法在初始化的时候会给每个虚拟节点添加一个patchFlags，patchFlags就是优化的标识。 只会比较patchFlags发生变化的vnode,进行更新视图，对于没有变化的元素做静态标记，在渲染的时候直接复用。

组合式API写法不同

vue2，采用Options API选项式

export default {
      // 数据      
      data() {     
           return {};
             },
      mounted() {},
      // 方法
      methods: {},
      computed: {},
      components:{}
 };

vue3，采用Composition API (组合api)

export default {
    setup() {
   // 数据 和 方法都在setup里面使用
    }
};
=================================
语法糖
<script setup>  
   直接写
</script>

生命周期不同

组建通信不同