Vue3实践指南：Vue3响应式比Vue2的性能要好吗、watch监听对象是分隔字符串时需指定deep、defineProps定义属性可接受多种类型

一、Vue3 响应式比 Vue2 的性能要好吗？

　　首先从实现上来讲：我们都知道 vue2 中的响应式主要归功于 Object.defineProperty, 它主要劫持对象的属性，所以它不能观测到对象属性的添加和删除，而在 vue3 中，是用 Proxy 实现的，劫持的是整个对象，能规避掉 vue2 留下的问题，但也有明显的缺点就是兼容性不够强。

　　但是对比 Vue2，你需要知道的是 vue3 性能上的优势主要还是体现在初始化阶段。

　　因为 Vue2 中定位响应式对象时，会递归把子对象变成响应式。而 Vue3 其实是惰性执行：在对象属性被真正访问的时候才会递归执行子对象变成响应式。

二、关于 watch：对于监听对象是分隔字符串时，需要在选项参数中指定 deep: true

// vue2.x
watch: {
    'data.distance': function (newVal, oldVal) {
      if (newVal === constants.DISTANCE_ON) {
        ...
      }
    },
},
// vue3.x
watch(
   () => this.data.distance,
   (newVal, oldVal) => {
        if (newVal === constants.DISTANCE_ON) {
            ...
        }
   },
   { deep: true },
 )

三、defineProps定义属性可接受多种类型

　　今天我想在声明Props中属性的类型，既想是String类型，也想为Number类型，也可以为Array类型。

　　起初我以为可以通过 ts 的联合类型，发现不行，最后官网其实有介绍，查了一下官网用数组即可解决，例如：type: [Number, String, Array]

　　官网传送门：Prop 验证 - https://v3.cn.vuejs.org/guide/component-props.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81