MVVM 模型

用户9184480

发布于 2024-12-13 18:54:05

6000

代码可运行

文章被收录于专栏：云计算linux云计算linux

运行总次数：0

代码可运行

MVVM 模型

M：模型(Model) ：对应 data 中的数据
V：视图(View) ：模板
VM：视图模型(ViewModel) ： Vue 实例对象

注：

data中所有的属性，最后都出现在了vm身上
vm身上所有的属性及Vue原型身上所有的属性，在 Vue模板中都可以直接使用

<script src="../js/vue.js"></script>
<div id="root">
    <div>名称：{{ name }}</div>
    <div>战队：{{ rank }}</div>
    <div>测试：{{ $options }}</div>
</div>
<script>
    Vue.config.productionTip = false
    new Vue({
        el: '#root',
        data: {
            name: 'uzi',
            rank: 'RNG'
        }
    })
</script>

Vue 中的数据代理

使用 Object.defineproperty 方法

let number = 18
let person = {
    name: '张三',
    sex: '男'
}
Object.defineProperty(person, 'age', {
    // value:18,
    // enumerable:true,   // 控制属性是否可以枚举，默认值是false
    // writable:true,     // 控制属性是否可以被修改，默认值是false
    // configurable:true  // 控制属性是否可以被删除，默认值是false
    // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
    get() {
        console.log('有人读取age属性了')
        return number
    },
    // 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
    set(value) {
        console.log('有人修改了age属性，且值是', value)
        number = value
    }
})
// console.log(Object.keys(person))
console.log(person)

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

let obj = { x: 100 }
let obj2 = { y: 200 }
Object.defineProperty(obj2, 'x', {
    get() {
        return obj.x
    },
    set(value) {
        obj.x = value
    }
})

Vue中的数据代理通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处：更加方便的操作data中的数据
基本原理
- 通过object.defineProperty()把data对象中所有属性添加到vm上
- 为每一个添加到vm上的属性，都指定一个 getter setter
- 在getter setter内部去操作（读/写）data中对应的属性

Vue将data中的数据拷贝了一份到_data属性中，又将_data里面的属性提到Vue实例中（如name），通过defineProperty实现数据代理，这样通过geter/setter操作 name，进而操作_data中的 name。而_data又对data进行数据劫持，实现响应式。

<!-- 引入Vue -->
<script src="../js/vue.js"></script>

<div id="root">
    <h2>学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
</div>

<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: '#root',
        data: {
            name: '郑州科技学院',
            address: '郑州'
        }
    })
</script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-10-17，如有侵权请联系 cloudcommunity@tencent.com 删除

mvvm