Vue3.0与Vue2.0的实际区别

案列

Vue2

优点;已于学习和使用，写代码的位置约定好。

缺点：数据和业务逻辑分散在同一个文件的N个地方，随着业务复杂度的上升，可能会出现动图左侧的代码组织方式，不利于管理和维护。

<template>
  <div class="container">
    <p>X 轴：{
   
   { x }} Y 轴：{
   
   { y }}</p>
    <hr />
    <div>
      <p>{
   
   { count }}</p>
      <button @click="add()">自增</button>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'App',
    data() {
      return {
        // !#Fn1
        x: 0,
        y: 0,
        // ?#Fn2
        count: 0
      }
    },
    mounted() {
      // !#Fn1
      document.addEventListener('mousemove', this.move)
    },
    methods: {
      // !#Fn1
      move(e) {
        this.x = e.pageX
        this.y = e.pageY
      },
      // ?#Fn2
      add() {
        this.count++
      }
    },
    destroyed() {
      // !#Fn1
      document.removeEventListener('mousemove', this.move)
    }
  }
</script>

优点：可以把同一功能的 *数据 *和 *业务逻辑 *组织到一起，方便复用和维护。

缺点：需要良好的代码组织和拆分能力，相对没有Vue2 容易上手。

注意：为了能让大家较好的过滤到Vue3.0版本，目前也是支持Vue2.x选项API的写法。

链接： why-composition-api、composition-api-doc。

<template>
  <div class="container">
    <p>X 轴：{
   
   { x }} Y 轴：{
   
   { y }}</p>
    <hr />
    <div>
      <p>{
   
   { count }}</p>
      <button @click="add()">自增</button>
    </div>
  </div>
</template>
<script>
  import { onMounted, onUnmounted, reactive, ref, toRefs } from 'vue'
  export default {
    name: 'App',
    setup() {
      // !#Fn1
      const mouse = reactive({
        x: 0,
        y: 0
      })
      const move = (e) => {
        mouse.x = e.pageX
        mouse.y = e.pageY
      }
      onMounted(() => {
        document.addEventListener('mousemove', move)
      })
      onUnmounted(() => {
        document.removeEventListener('mousemove', move)
      })

      // ?Fn2
      const count = ref(0)
      const add = () => {
        count.value++
      }

      // 统一返回数据供模板使用
      return {
        ...toRefs(mouse),
        count,
        add
      }
    }
  }
</script>