Vue基础系列MVVM模型-属性操作Object.defineProperty-数据代理

Posted 2022-02-25 勇敢*牛牛

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue基础系列MVVM模型-属性操作Object.defineProperty-数据代理相关的知识，希望对你有一定的参考价值。

和阿牛一起冲Vue

🌕写在前面
🍊博客主页 ：勇敢link牛牛
🎉欢迎关注：🔎点赞👍收藏⭐️留言📝
🌟本文由 勇敢link牛牛 原创，CSDN首发！
📆首发时间：🌹2022年2月20日🌹
🆕最新更新时间：🎄2022年2月20日🎄
✉️愿你熬过万丈孤独，藏下星辰大海！
📠参考书籍：📚《Vue2》
🙏作者水平很有限，如果发现错误，请留言轰炸哦！万分感谢感谢感谢！

前言

青春，因为奋斗与奉献更美丽。

一、MVVM模型

1、MVVM模型是什么？

1. M：模型(Model) ：data中的数据
2. V：视图(View) ：模板代码
3. VM：视图模型(ViewModel)：Vue实例

2、观察发现

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

3、代码示例

	<h1>学校名称：name</h1>
		<h1>学校地址：address</h1>
		<h1>测试一下1：1+1</h1>
		<h1>测试一下2：$options</h1>
		<h1>测试一下3：$emit</h1>
		<h1>测试一下4：_c</h1>

二、属性操作Object.defineProperty

什么是Object.defineProperty方法？

是给一个对象添加属性或者修改属性

如何使用这个方法

传三个参数：

一是给哪个对象传递属性，
二是添加的属性叫什么名字，
第三个是配置项

let person = 
        name: "张三",
        sex: '男'
    
Object.defineProperty(person, 'age', 
	value: '18',
)
console.log(person);

pink色的意义

不能被枚举等，例如通过console.log(Object.keys(person));通过数组形式输出对象属性值

或者通过forin循环属性

get方法获取年龄

set方法

代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">
        <h1></h1>
    </div>
</body>
<script src='vue.js'></script>
<script>
    Vue.config.productionTip = false;
    let number = 18;
    let person = 
        name: "张三",
        sex: '男'
    
    Object.defineProperty(person, 'age', 
        // value: "13",
        // enumerable: true,//控制属性书否可以枚举
        // writable: true,//控制属性是否可以修改
        // configurable: true,//控制属性是否可以被删除 
        // 当有人读取person的age属性时，get函数就会被调用，且返回的值是age某项需要值
        get: function () 
            return number;
        ,
        // 
        set(value) 
            console.log('有人修改了age属性值，改为', value);
            number = value;

        
    )
    console.log(person);
    // console.log(Object.keys(person));
    for (let key in person) 
        console.log(person[key]);
    
</script>

</html>

数据代理

也就是通过一个对象代理另一个对象中的属性的操作(读/写)；
代码示例：
简单的效果

Vue.config.productionTip = false;
    //数据代理：通过一个对象代理另一个对象中的属性的操作(读/写)

    let obj_1 = 
        x: 100
    
    let obj_2 = 
        y: 200
    
    Object.defineProperty(obj_2, 'x', 
        get() 
            return obj_1.x
        ,
        set(value) 
            obj_1.x = value
        
    )
    console.log(obj_1);

Vue中的数据代理

const vm = new Vue(
        el: '#root',
        data: 
            name: 'jack',
            message: 
                url: 'https://blog.csdn.net/m0_46672781?spm=1000.2115.3001.5343',
                name: '勇敢牛牛'
            
        
    );