Vue基础 - el - data - MVVM - 数据代理

「已注销」

已于 2022-07-04 16:47:47 修改

阅读量373

点赞数

分类专栏： Vue 文章标签： vue.js 前端

于 2021-12-05 15:11:23 首次发布

本文链接：https://blog.csdn.net/qq_39264561/article/details/121729811

版权

Vue 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

el与data的两种写法

1、el有两种写法

new.Vue时配置el属性
先创建Vue实例，随后再通过vm.$mount('#root')指定el的值

2、data有两种写法

对象式
函数式
如何选择：在使用组件时，data必须使用函数式，否则会报错

3、一个重要原则

- 由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了

<!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>el与data的两种写法</title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h3>hello，{{name}}</h3>
    </div>
</body>

<script>
    Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示

    /*
    // el两种写法
    const v = new Vue( {
        el: '#root',  // el第一种写法
        data: {
            name: '半夏天南星'
        }
    })
    // el第二种写法
    v.$mount('#root');
    */

    // data两种写法
    new Vue({
        el: '#root',
        // data第一种写法，对象式
        // data: {
        //     name: '半夏天南星'
        // }
        // data第二种写法，函数式
        data() {
            console.log(this);  // 此处的this是Vue实例对象
            return{
                name: '半夏天南星'
            }
        }
    })
</script>

</html>

MVVM

在这里插入图片描述

MVVM模型

M：模型（Model）：data中的数据
V：视图（View）：模板代码
VM：视图模型（ViewModel）：Vue实例

观察发现：

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

数据代理

回顾Object.defineProperty()

<!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>回顾Object.defineProperty</title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <script src="../js/vue.js"></script>
</head>

<body>
    <script>
        let number = 18;
        let person = {
            name: '半夏天南星',
            sex: '男',
        }

        // Object.defineProperty添加数据时传入三个参数，分别是：修改对象、添加属性、属性值
        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(person);
    </script>
</body>

</html>

定义

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

<!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>数据代理</title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <script src="../js/vue.js"></script>
</head>

<body>
    <script>
        let obj1 = { x: 100 };
        let obj2 = { y: 100 };

        Object.defineProperty(obj2, 'x', {
            get() {
                return obj1.x;  // 将obj2的x属性值设置为obj1的x值
            },
            set(value) {
                obj1.x = value;
            }
        })
    </script>
</body>
</html>

Vue中的数据代理

通过vm对象来代理data对象中属性的操作(读/写)

Vue中数据代理的好处

更加方便的操作data中的数据

基本原理

通过Object.defineProperty()把data对象中所有属性添加到vm上
为每一个添加到vm上的属性，都指定一个getter/setter
在getter/setter内部去操作(读/写)data中对应的属性

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础 - el - data - MVVM - 数据代理

el与data的两种写法1、el有两种写法new.Vue时配置el属性先创建Vue实例，随后再通过vm.$mount('#root')指定el的值2、data有两种写法对象式函数式如何选择：在使用组件时，data必须使用函数式，否则会报错3、一个重要原则 - 由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了<!DOCTYPE html><html lang="en"><head> <m
复制链接

扫一扫

专栏目录