跨越时代的框架对决：深度剖析Vue 2与Vue 3核心差异

// Vue2
const vm = new Vue({
  data: {
    message: 'Hello Vue2!'
  }
});
console.log(vm.$data.message); // 输出 "Hello Vue2!"
vm.message = 'Hello Vue3!';

// Vue3 使用 composition API
import { reactive } from 'vue';
const state = reactive({ message: 'Hello Vue3!' });
console.log(state.message); // 输出 "Hello Vue3!"
state.message = 'Hello Future!';

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

// Vue3
import { ref, computed } from 'vue';
export default {
  setup() {
    const count = ref(0);
    
    const doubleCount = computed(() => count.value * 2);
    function increment() {
      count.value++;
    }
    return {
      count,
      doubleCount,
      increment
    };
  }
};

// Vue2
export default {
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  // ...
};
// Vue3
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated } from 'vue';
export default {
  setup() {
    onBeforeMount(() => {});
    onMounted(() => {});
    onBeforeUpdate(() => {});
    onUpdated(() => {});
  }
};

<!-- Vue2 -->
<template>
  <div>
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </div>
</template>
<!-- Vue3 -->
<template>
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

<!-- Vue3 -->
<template>
  <teleport to="#modal-container">
    <modal v-if="showModal">This is a modal!</modal>
  </teleport>
</template>

<template>
  <suspense>
    <template #default>
      <async-component />
    </template>
    <template #fallback>
      <loading-spinner /> <!-- 加载中... -->
    </template>
  </suspense>
</template>

// 安装Pinia
import { createApp } from 'vue';
import { createPinia } from 'pinia';
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
// 创建store
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
});
// 在组件中使用
import { useCounterStore } from './stores/counter';
export default {
  setup() {
    const counter = useCounterStore();
    
    function handleClick() {
      counter.increment();
    }
    return {
      handleClick
    };
  }
};

import { h, defineComponent } from 'vue';
export default defineComponent({
  setup(props, context) {
    // 访问props和emit
    const { foo } = props;
    const { emit } = context;
    // 返回渲染函数
    return () => h('div', {}, `Prop value: ${foo}`);
  },
  props: {
    foo: String
  }
});

import { createRouter, createWebHistory } from 'vue-router';
import { useRoute, useRouter } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ],
});
// 在组件中使用
export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    // 声明导航守卫
    router.beforeEach((to, from, next) => {
      // ...
    });
    return {
      route,
      router
    };
  }
};

import { defineComponent } from 'vue';
import { defineCustomElement } from 'vue/dist/vue.esm-bundler.js';
const MyVueComponent = defineComponent({
  template: '<div>Hello from Vue Component!</div>'
});
customElements.define('my-vue-component', defineCustomElement(MyVueComponent));

// Vue2
Vue.directive('my-directive', {
  bind(el, binding, vnode) {
    el.style.color = binding.value;
  }
});
// Vue3
const app = createApp(App);
app.directive('my-directive', {
  beforeMount(el, binding) {
    el.style.color = binding.value;
  },
  updated(el, binding) {
    el.style.color = binding.value;
  }
});

<!-- Vue2 -->
<input ref="inputRef">
<script>
export default {
  mounted() {
    console.log(this.$refs.inputRef);
  }
};
</script>
<!-- Vue3 Composition API -->
<input ref="inputRef">
<script setup>
import { ref } from 'vue';
const inputRef = ref(null);
onMounted(() => {
  console.log(inputRef.value);
});
</script>

<!-- Vue2 -->
<transition name="fade">
  <div v-if="show">Fade in/out</div>
</transition>
<!-- Vue3 Composition API -->
<Transition name="fade">
  <div v-if="show">Fade in/out</div>
</Transition>

// Vue2
Vue.prototype.$theme = 'dark';
// 子组件
this.$parent.$theme; // 'dark'
// Vue3 Composition API
setup() {
  const theme = inject('theme', 'light');
  provide('theme', 'dark');
  return { theme };
}