1.响应式系统
Vue 2: 使用 Object.defineProperty 来实现数据的响应式。
Vue 3: 使用 Proxy 来代替 Object.defineProperty，使得响应式系统更高效，且支持更多的功能（比如数组的索引、对象属性的添加/删除等）。
Vue 2 响应式代码：
new Vue({
data: {
message: 'Hello Vue!'
},
template: '<div>{{ message }}</div>'
})
Vue 3 响应式代码：
import { reactive } from 'vue';
const state = reactive({
message: 'Hello Vue 3!'
});
const app = {
template: '<div>{{ state.message }}</div>',
setup() {
return { state };
}
};
2.声明周期钩子
Vue 2: 使用 created、mounted 等生命周期钩子。
Vue 3: 生命周期钩子更改为 onCreated、onMounted 等，可以在 setup() 函数中使用生命周期钩子（如 onMounted, onUnmounted 等）。
Vue 2 生命周期：
Vue 2 生命周期钩子
- **beforeCreate**：实例初始化之后，数据观测和事件/生命周期设置之前被调用。
- **created**：实例已创建，数据已观测，事件已设置，$el 并未被挂载。
- **beforeMount**：模板编译完成、挂载开始之前调用，相关的 `render` 函数首次被调用。
- **mounted**：实例挂载后调用，`el` 被新创建的 `vm.$el` 替换。此时可以访问 DOM。
- **beforeUpdate**：数据变化导致虚拟 DOM 重新渲染之前调用。
- **updated**：数据变化导致虚拟 DOM 重新渲染之后调用。
- **beforeDestroy**：实例销毁之前调用，此时组件仍然可用。
- **destroyed**：实例销毁后调用，组件实例被销毁，事件监听器被清理。
new Vue({
data() {
return {
message: 'Hello Vue 2!'
};
},
created() {
console.log('Component created');
},
mounted() {
console.log('Component mounted');
},
template: '<div>{{ message }}</div>'
});
Vue 3 生命周期（Composition API）：
Vue 3 生命周期钩子
- **beforeCreate**：实例初始化之后，数据观测和事件/生命周期设置之前被调用。
- **created**：实例已创建，数据已观测，事件已设置，$el 并未被挂载。
- **beforeMount**：模板编译完成、挂载开始之前调用，相关的 `render` 函数首次被调用。
- **mounted**：实例挂载后调用，`el` 被新创建的 `vm.$el` 替换。此时可以访问 DOM。
- **beforeUpdate**：数据变化导致虚拟 DOM 重新渲染之前调用。
- **updated**：数据变化导致虚拟 DOM 重新渲染之后调用。
- **beforeDestroy**：实例销毁之前调用，此时组件仍然可用。
- **destroyed**：实例销毁后调用，组件实例被销毁，事件监听器被清理。
import { ref, onMounted } from 'vue';
export default {
setup() {
const message = ref('Hello Vue 3!');
onMounted(() => {
console.log('Component mounted');
});
return { message };
},
template: '<div>{{ message }}</div>'
};
3.组件定义方式
Vue 2: 使用 Vue.extend() 或 new Vue() 定义组件。
Vue 3: 引入了 setup() 函数，推荐使用 Composition API 来定义组件，逻辑更加灵活和复用。
Vue 2 组件：
Vue.component('my-component', {
data() {
return {
message: 'Hello from Vue 2 component!'
};
},
template: '<div>{{ message }}</div>'
});
Vue 3 组件（Composition API）：
import { ref } from 'vue';
export default {
setup() {
const message = ref('Hello from Vue 3 component!');
return { message };
},
template: '<div>{{ message }}</div>'
};
4.插件和Api
Vue 2: 通过 Vue.use() 注册插件。
Vue 2 插件：
Vue.use(VueRouter);
Vue 3: 插件的注册方式变得更加灵活，部分插件已经进行了重构。 Vue 3 插件：
import { createApp } from 'vue';
import VueRouter from 'vue-router';
const app = createApp(App);
app.use(VueRouter);
