【前端每日基础】day44——vue2和vue3的区别

1. Composition API vs Options API

Vue 2 (Options API)
在 Vue 2 中，组件的逻辑通常是通过 data、methods、computed 等选项来定义的。

// Vue 2 组件
export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}

Vue 3 (Composition API)
在 Vue 3 中，可以使用 Composition API，将相关的逻辑组合在一起，使代码更易于复用和维护。

// Vue 3 组件
import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);
    
    const increment = () => {
      count.value++;
    };

    return {
      count,
      doubleCount,
      increment
    };
  }
}

2. 响应性系统

Vue 2
Vue 2 的响应性系统基于 Object.defineProperty，这意味着不能检测到对象属性的添加和删除。

// Vue 2 响应性
var vm = new Vue({
  data: {
    message: 'Hello'
  }
});

vm.message = 'Hello Vue!'; // 响应式
vm.newProperty = 'New'; // 非响应式

Vue 3
Vue 3 使用 Proxy 实现响应性系统，能够检测到对象属性的添加和删除。

// Vue 3 响应性
import { reactive } from 'vue';

const state = reactive({
  message: 'Hello'
});

state.message = 'Hello Vue!'; // 响应式
state.newProperty = 'New'; // 也是响应式

3. TypeScript 支持

Vue 2
在 Vue 2 中使用 TypeScript 通常需要额外的配置和类型声明。

// Vue 2 中使用 TypeScript
import Vue from 'vue';
import Component from 'vue-class-component';

@Component
export default class MyComponent extends Vue {
  message: string = 'Hello';

  get doubleMessage(): string {
    return this.message + this.message;
  }

  increment() {
    this.message += '!';
  }
}

Vue 3
Vue 3 对 TypeScript 支持更好，类型推导更加完善。

// Vue 3 中使用 TypeScript
import { defineComponent, ref, computed } from 'vue';

export default defineComponent({
  setup() {
    const message = ref('Hello');
    const doubleMessage = computed(() => message.value + message.value);
    
    const increment = () => {
      message.value += '!';
    };

    return {
      message,
      doubleMessage,
      increment
    };
  }
});

4. 多根节点 (Fragments)

Vue 2
Vue 2 中每个组件必须有一个根节点。

<template>
  <div>
    <p>First paragraph</p>
    <p>Second paragraph</p>
  </div>
</template>

Vue 3
Vue 3 允许组件返回多个根节点。

<template>
  <p>First paragraph</p>
  <p>Second paragraph</p>
</template>

5. Teleport

Vue 3
Vue 3 引入了 Teleport 组件，允许开发者将某个组件的 DOM 树渲染到当前组件树之外的任意位置。

<template>
  <div>
    <button @click="showModal = true">Open Modal</button>
    <Teleport to="body">
      <div v-if="showModal" class="modal">
        <p>This is a modal</p>
        <button @click="showModal = false">Close Modal</button>
      </div>
    </Teleport>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const showModal = ref(false);
    return { showModal };
  }
}
</script>

通过这些代码实例，您可以更清晰地看到 Vue 2 和 Vue 3 之间的一些主要区别和改进。