vue2和vue3的区别，举例说明

Vue3相对于Vue2有以下几个区别：
1.性能更好：Vue3使用了Proxy代替了Object.defineProperty，提高了响应式系统的性能。
2.体积更小：Vue3的体积比Vue2小了30%左右。
3.组合式API：Vue3引入了组合式API，可以更好地组织和复用逻辑代码。
4.更好的TypeScript支持：Vue3对TypeScript的支持更加友好。
5.新的生命周期函数：Vue3引入了新的生命周期函数，如beforeUnmount等。
6.新的watcher：Vue3引入了watchEffect，可以更方便地监听响应式数据的变化。

举例说明：
1.在Vue2中，我们使用options API来定义组件，如下所示：

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

而在Vue3中，我们可以使用setup函数来定义组件，如下所示：

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0
    })

    const increment = () => {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}

可以看到，使用setup函数可以更好地组织和复用逻辑代码。

2.在Vue2中，我们使用watch来监听响应式数据的变化，如下所示：

export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`count变化了，新值为${newValue}，旧值为${oldValue}`)
    }
  }
}

而在Vue3中，我们可以使用watchEffect来监听响应式数据的变化，如下所示：

import { watchEffect, reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0
    })

    watchEffect(() => {
      console.log(`count变化了，新值为${state.count}`)
    })

    const increment = () => {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}

可以看到，使用watchEffect可以更方便地监听响应式数据的变化。