vue的vm怎么实现
Vue 实例（vm）的实现原理
Vue 实例（ViewModel，简称 vm）是 Vue 应用的核心，负责连接数据与视图。其实现基于以下关键机制：
数据响应式系统
通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）劫持数据对象的属性访问。当数据变化时，触发依赖的视图更新。
// Vue 2 响应式简化实现
function defineReactive(obj, key, val) {
const dep = new Dep(); // 依赖收集器
Object.defineProperty(obj, key, {
get() {
dep.depend(); // 收集当前依赖
return val;
},
set(newVal) {
val = newVal;
dep.notify(); // 通知更新
}
});
}虚拟 DOM 与渲染
Vue 将模板编译为渲染函数，生成虚拟 DOM。当数据变化时，通过 diff 算法比对新旧虚拟 DOM，高效更新真实 DOM。
// 虚拟 DOM 简化示例
function createVNode(tag, props, children) {
return { tag, props, children };
}生命周期管理
实例化过程中触发生命周期钩子（如 created、mounted），允许开发者在特定阶段插入逻辑。
// 生命周期调用示例
function callHook(vm, hook) {
const handlers = vm.$options[hook];
handlers && handlers.call(vm);
}创建 Vue 实例的典型方式
通过 new Vue(options) 创建实例，选项对象包含数据、方法、生命周期钩子等配置。
const vm = new Vue({
data: { message: 'Hello Vue' },
methods: {
showMessage() {
alert(this.message);
}
},
mounted() {
console.log('实例已挂载');
}
});实例方法与属性
Vue 实例暴露常用 API，如 $watch、$set 等，并提供对 DOM 元素（$el）、父实例（$parent）等属性的访问。
vm.$watch('message', (newVal) => {
console.log('message 变化:', newVal);
});组件实例扩展
每个 Vue 组件也是一个独立的 vm 实例，通过组件系统实现复用和嵌套，继承 Vue 的核心能力。
