深入vue之数据代理

最新推荐文章于 2024-11-08 23:19:07 发布

一颗西柚酱

最新推荐文章于 2024-11-08 23:19:07 发布

阅读量263

点赞数 1

分类专栏：深入Vue原理文章标签： vue.js javascript 前端前端框架

本文链接：https://blog.csdn.net/howbeauty/article/details/126455560

版权

深入Vue原理专栏收录该内容

1 篇文章 0 订阅

订阅专栏

下面代码实现了数据代理的基本流程

//这是index.js代码

<!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>
    <script src="../js/vue.js"></script>
</head>

<body>

    <script>
        let vm = new Vue({
            data: {
                message: 1
            },
            watch: {
                message() {
                    console.log('message 发生了变化')
                }
            }
        })
    </script>
</body>

</html>

//这是index.js 代码
class Vue {
    constructor(options) {
        this.$options = options
        //TODD:data 也可能是函数
        this._data = options.data
        this.initData()

    }
    initData() {
        let data = this._data
        let keys = Object.keys(data)
        for (let i = 0; i < keys.length; i++) {
            Object.defineProperties(this, keys[i], {
                enumerable: true,
                configurable: true,
                get: function proxyGetter() {
                    return data[keys[i]]
                },
                set: function proxySetter(value) {
                    data[keys[i]] = value
                }

            })
        }
    }



}