Vue2和VUe3的区别

通过上图可以发现 vue3 的目录结构跟 vue2.x 还是有很大的区别的，特别明显可以看出 vue3 是没有 build 和 config 这两个配置文件夹的，然后 static文件夹 在vue3 变成了 public文件夹，它们同样都是用于存放静态文件；需要使用到config.js文件设置代理配置等需求时，我们需要在目录的最外层新建一个 vue.config.js 文件进行设置，里面的内容按需设置即可

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

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

vue3中使用了ES6的Proxy API对数据代理。 相比vue2.x，使用proxy的优势如下：

• defineProperty只能监听某个属性，不能对全对象监听
• 可以省去for in，闭包等内容来提升效率(直接绑定整个对象即可)
• 可以监听数组，不用再去单独的对数组做特异性操作vue3.x可以检测到数组内部数据的变化。

2: vue2和vue3定义数据变量和方法的改变

在vue2中定义数据变量是data(){}，创建的方法要在methods:{}中。
而在vue3中直接在setup(){}中，在这里面定义的变量和方法因为最终要在模板中使用，所以最后都得 return。如下代码：

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'App',
  setup() {
    //使用ref，说明这个数组就是全局在面板中可以使用了
    const girls = ref(['美女1','美女2','美女3'])
    const selectGirl = ref('2')
    //设置一个函数
    const selectGirlFun = (index: number) => {
      //改变selectGirl的值要加value
      //要得到值要加value ，这些都因为使用了ref函数
      selectGirl.value = girls.value[index]
    }
    //在标签中使用的变量要使用return
    //为什么要使用return，因为有的不需要在标签中使用的就不用return
   return{
      girls,
      selectGirl,
      selectGirlFun
    }
  },
});
</script>

3: vue2和vue3生命周期钩子函数的不同

• vue2中的生命周期

  • beforeCreate 组件创建之前
  • created 组件创建之后
  • beforeMount 组价挂载到页面之前执行
  • mounted 组件挂载到页面之后执行
  • beforeUpdate 组件更新之前
  • updated 组件更新之后

• vue3中的生命周期

  • setup 开始创建组件
  • onBeforeMount 组价挂载到页面之前执行
  • onMounted 组件挂载到页面之后执行
  • onBeforeUpdate 组件更新之前
  • onUpdated 组件更新之后
    而且Vue3.x 生命周期在调用前需要先进行引入。
    如：

import {
 reactive,
 toRefs,
 onMounted,
 onBeforeMount,
 onBeforeUpdate,
 onUpdated,
} from "vue";

• 来一个总的生命周期对比，这样更便于记忆

Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured

除了这些钩子函数外，Vue3.x还增加了onRenderTracked 和onRenderTriggered函数。

4: vue3中新加入了TypeScript和PWA的支持

这篇文章持续更新哟