mvvm实现vue
MVVM 模式在 Vue 中的实现
MVVM（Model-View-ViewModel）是一种设计模式，Vue 框架天然支持 MVVM 模式。以下是 Vue 中实现 MVVM 的关键机制：
数据绑定（Model 与 View 的同步）
Vue 通过数据劫持和发布-订阅模式实现双向绑定：
// 数据层（Model）
const vm = new Vue({
data: {
message: 'Hello MVVM'
}
})
// 视图层（View）
<div id="app">
{{ message }}
<input v-model="message">
</div>当 message 改变时，视图自动更新；反之用户修改输入框时，数据也会同步变更。
指令系统（View 与 ViewModel 的桥梁）
Vue 指令是特殊的 HTML 属性，实现视图与逻辑的绑定：
<div v-if="isVisible">控制显示</div>
<ul>
<li v-for="item in list">{{ item.name }}</li>
</ul>
<button @click="handleClick">事件绑定</button>计算属性和侦听器（ViewModel 逻辑）
ViewModel 包含业务逻辑和状态管理：
new Vue({
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
},
watch: {
counter(newVal) {
console.log('值变化:', newVal)
}
}
})组件化（MVVM 的模块化实现）
Vue 组件是独立的 MVVM 单元：
Vue.component('user-card', {
props: ['user'], // 外部数据（Model）
template: ` // 视图（View）
<div class="card">
<h2>{{ user.name }}</h2>
</div>
`,
methods: { // 逻辑（ViewModel）
sendMessage() {
// ...
}
}
})响应式原理（底层实现）
Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现数据响应：
// 简化的响应式实现
function defineReactive(obj, key) {
let value = obj[key]
Object.defineProperty(obj, key, {
get() {
return value
},
set(newVal) {
value = newVal
updateView() // 触发视图更新
}
})
}生命周期钩子（ViewModel 控制流）
Vue 提供生命周期函数管理 MVVM 流程：
new Vue({
created() {
// 数据已初始化，DOM未生成
},
mounted() {
// DOM已挂载
},
beforeUpdate() {
// 数据变化前的钩子
}
})通过以上机制，Vue 实现了：
- Model：普通 JavaScript 对象
- View：模板/DOM 渲染
- ViewModel：Vue 实例处理绑定和逻辑
