实现vue vm

Vue 实例（VM）的基本概念

Vue 实例是 Vue 应用的根对象，通过 new Vue() 创建。它是数据、方法、生命周期钩子等的载体，负责连接视图（DOM）与数据模型（Model）。

创建 Vue 实例

通过构造函数 Vue 初始化实例，传入配置对象（options）定义数据和行为：

const vm = new Vue({
  el: '#app',      // 挂载目标（DOM 元素）
  data: {          // 响应式数据
    message: 'Hello Vue!'
  },
  methods: {       // 方法
    showMessage() {
      console.log(this.message);
    }
  }
});

核心配置选项

• el：指定挂载的 DOM 元素（如 #app）。
• data：定义响应式数据，Vue 会递归将其属性转为 getter/setter。
• methods：定义方法，可通过 this 访问实例数据。
• computed：计算属性，基于依赖缓存结果。
• watch：监听数据变化，执行自定义逻辑。

响应式原理

Vue 通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现数据劫持。当数据变化时，触发依赖的视图更新。

生命周期钩子

Vue 实例在创建、更新、销毁过程中会触发生命周期钩子，常用钩子包括：

• created：实例创建完成，但未挂载 DOM。
• mounted：DOM 挂载完成。
• updated：数据更新导致 DOM 重新渲染后。
• destroyed：实例销毁后。

示例：

new Vue({
  created() {
    console.log('实例已创建');
  },
  mounted() {
    console.log('DOM 已挂载');
  }
});

实例属性和方法

• vm.$data：访问原始数据对象。
• vm.$el：访问挂载的 DOM 元素。
• vm.$watch()：动态监听数据变化。

注意事项

• 避免在 data 中使用箭头函数，会导致 this 指向错误。
• 动态添加的根级属性需使用 Vue.set() 确保响应式。

通过合理配置 Vue 实例，可以实现数据驱动视图的高效开发模式。