Vue2 与 Vue3 全面对比

// Vue2：全部导入
import Vue from 'vue';

// Vue3：按需导入
import { ref, reactive, computed } from 'vue';

// Vue2 编译结果
function render() {
  return h('div', { id: 'app' }, [
    h('h1', {}, this.title),
    h('p', { class: 'static' }, 'Static text')
  ]);
}

// Vue3 编译结果（带优化）
const _hoisted_1 = h('p', { class: 'static' }, 'Static text');

function render() {
  return h('div', { id: 'app' }, [
    h('h1', {}, this.title),
    _hoisted_1
  ]);
}

// 模板：<div :id="dynamicId" class="static">{{ text }}</div>
// 编译后（简化）
createElementVNode("div", {
  id: dynamicId,
  class: "static"
}, toDisplayString(text), 9 /* TEXT, PROPS */, ["id"])
// 数字 9 是 patchFlag，["id"] 表示只有 id 是动态 prop
// 更新时 class 完全跳过对比，只看 id 和文本

// Vue2 中这些操作不会触发视图更新
this.obj.newProp = 'value';        // 新增属性无效
delete this.obj.oldProp;           // 删除属性无效
this.arr[0] = 'newValue';          // 索引赋值无效
this.arr.length = 0;               // 修改 length 无效

// 必须使用特殊 API
this.$set(this.obj, 'newProp', 'value');
this.$delete(this.obj, 'oldProp');
this.arr.splice(0, 1, 'newValue');

// Vue3 中一切照常工作
const obj = reactive({ a: 1 });
obj.newProp = 'value';   // 有效，视图更新
delete obj.a;            // 有效
const arr = reactive([1, 2, 3]);
arr[0] = 'newValue';     // 有效
arr.length = 0;          // 有效

<script>
export default {
  data() {
    return {
      count: 0,
      user: null
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    }
  },
  mounted() {
    this.fetchUser();
  }
};
</script>

<script setup>
import { ref, computed, onMounted } from 'vue';

const count = ref(0);
const user = ref(null);

const increment = () => {
  count.value++;
};

const doubleCount = computed(() => count.value * 2);

const fetchUser = async () => {
  // 获取用户
};

onMounted(() => {
  fetchUser();
});
</script>

// mixins/counter.js
export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() { this.count++; }
  }
};

// 使用
import counterMixin from './mixins/counter';
export default {
  mixins: [counterMixin]
  // 问题：count 和 increment 从哪来？不看 mixin 源码根本不知道
  // 多个 mixin 还可能命名冲突
};

// composables/useCounter.js
import { ref } from 'vue';

export function useCounter(initial = 0) {
  const count = ref(initial);
  const increment = () => count.value++;
  return { count, increment };
}

// 使用
import { useCounter } from './composables/useCounter';
// 来源清晰，可重命名，无隐式注入
const { count, increment } = useCounter(10);

// Vue2 生命周期
export default {
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  mounted() {
    console.log('mounted');
  },
  beforeDestroy() {
    console.log('beforeDestroy');
  }
};

// Vue3 生命周期
import {
  onBeforeMount,
  onMounted,
  onBeforeUnmount,
  onUnmounted
} from 'vue';

export default {
  setup() {
    onBeforeMount(() => {
      console.log('onBeforeMount');
    });

    onMounted(() => {
      console.log('onMounted');
    });

    onBeforeUnmount(() => {
      console.log('onBeforeUnmount');
    });

    onUnmounted(() => {
      console.log('onUnmounted');
    });
  }
};

import { onRenderTracked, onRenderTriggered } from 'vue';

export default {
  setup() {
    // 追踪哪个响应式依赖被收集
    onRenderTracked((e) => {
      console.log('tracked:', e);
    });
    // 追踪哪个依赖变化触发了重渲染，排查性能问题利器
    onRenderTriggered((e) => {
      console.log('triggered:', e);
    });
  }
};

export default {
  data() {
    return {
      count: 0,
      user: {
        name: 'Alice',
        age: 25
      }
    };
  }
};

import { ref, reactive } from 'vue';

// ref：适合基本类型
const count = ref(0);

// reactive：适合对象
const user = reactive({
  name: 'Alice',
  age: 25
});

// reactive 解构丢失响应性的坑
const state = reactive({ count: 0 });
let { count } = state;   // count 只是普通值，不再响应
count++;                  // state.count 不变

// 解决方案：toRefs
import { toRefs } from 'vue';
const { count } = toRefs(state); // count 是 ref，保持响应

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};

import { ref, computed } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed(() => {
  return firstName.value + ' ' + lastName.value;
});

const fullName = computed({
  get() {
    return firstName.value + ' ' + lastName.value;
  },
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ');
  }
});
fullName.value = 'Jane Smith'; // 会拆分并回写

export default {
  data() {
    return {
      count: 0
    };
  },
  watch: {
    count(newVal, oldVal) {
      console.log('count changed:', newVal, oldVal);
    }
  }
};

import { ref, watch, watchEffect } from 'vue';

const count = ref(0);

// 监听单个源
watch(count, (newVal, oldVal) => {
  console.log('count changed:', newVal, oldVal);
});

// watchEffect：自动追踪依赖
watchEffect(() => {
  console.log('count:', count.value);
});

// 监听多个源
watch([firstName, lastName], ([newFirst, newLast]) => {
  console.log(newFirst, newLast);
});

// 监听 reactive 对象的某个属性（用 getter）
watch(() => user.age, (newAge) => {
  console.log('年龄变化', newAge);
});

// 深度监听 + 立即执行
watch(user, (val) => {
  console.log('user 深层变化', val);
}, { deep: true, immediate: true });

// 全局注册
Vue.component('my-component', {
  template: '<div>My Component</div>'
});

// 局部注册
export default {
  components: {
    MyComponent
  }
};

import { defineComponent } from 'vue';
import MyComponent from './MyComponent.vue';

// defineComponent（可选，用于类型推断）
export default defineComponent({
  components: {
    MyComponent
  }
});

// <script setup> 自动注册
<script setup>
import MyComponent from './MyComponent.vue';
</script>

// Vue2：挂在全局 Vue 上，影响所有实例
Vue.component('MyComponent', MyComponent);

// Vue3：挂在具体 app 实例上，多个 app 互不影响
const app = createApp(App);
app.component('MyComponent', MyComponent);

<script>
export default {
  props: {
    title: String,
    count: {
      type: Number,
      default: 0
    }
  },
  methods: {
    handleClick() {
      this.$emit('click', { id: 1 });
    }
  }
};
</script>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  title: String,
  count: {
    type: Number,
    default: 0
  }
});

const emit = defineEmits(['click', 'update']);

const handleClick = () => {
  emit('click', { id: 1 });
};
</script>

<script setup lang="ts">
interface Props {
  title: string;
  count?: number;
}

// 类型驱动的声明，配合 withDefaults 设默认值
const props = withDefaults(defineProps<Props>(), {
  count: 0
});

const emit = defineEmits<{
  (e: 'click', payload: { id: number }): void;
  (e: 'update', value: string): void;
}>();
</script>

<!-- Fragment：Vue3 支持多个根节点，Vue2 必须单根 -->
<template>
  <header>头部</header>
  <main>内容</main>
  <footer>底部</footer>
</template>

<!-- Teleport：把内容渲染到 DOM 树的其他位置，如 body 下的弹窗 -->
<template>
  <Teleport to="body">
    <div class="modal">我被传送到 body 下了</div>
  </Teleport>
</template>

<!-- Suspense：优雅处理异步组件的加载态 -->
<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>加载中...</div>
    </template>
  </Suspense>
</template>

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});

import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2
  }
});

// 组件中使用
const counterStore = useCounterStore();
counterStore.increment();

import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);
  const doubleCount = computed(() => count.value * 2);
  function increment() {
    count.value++;
  }
  return { count, doubleCount, increment };
});

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home
    }
  ]
});

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    }
  ]
});

<script setup>
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();   // 相当于 this.$route
const router = useRouter();  // 相当于 this.$router

console.log(route.params.id);
router.push('/home');
</script>

{
  "dependencies": {
    "vue": "^3.0.0",
    "vue-router": "^4.0.0",
    "vuex": "^4.0.0"
  }
}

// Vue2
import Vue from 'vue';
Vue.use(Plugin);
Vue.component('MyComponent', MyComponent);

// Vue3
import { createApp } from 'vue';
const app = createApp(App);
app.use(Plugin);
app.component('MyComponent', MyComponent);
app.mount('#app');

<!-- Vue2 .sync -->
<Child :title.sync="title" />
<!-- Vue3 等价写法 -->
<Child v-model:title="title" />

// Vue2 过滤器
{{ price | currency }}
// Vue3 用计算属性或方法替代
{{ formatCurrency(price) }}