实现一个小型的watcher

最新推荐文章于 2024-07-29 20:11:48 发布

niuyueyang

最新推荐文章于 2024-07-29 20:11:48 发布

阅读量144

点赞数

分类专栏： vue 文章标签： js

本文链接：https://blog.csdn.net/qq_33332184/article/details/106431316

版权

vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

watch.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="watch.js"></script>
    <script>
        let vm = new Watcher({
            data:{
                a: 1,
                b: 3
            },
            watch:{
                a(val, oldVal){
                	this.b = val;
                    console.log(val, oldVal)
                }
            }
        })
        vm.a = 2;
    </script>
</body>
</html>

class Watcher{
    constructor(opts) {
        this.$data = this.getBaseType(opts.data) == 'Object' ? opts.data : {}
        this.$watch = this.getBaseType(opts.watch) == 'Object' ? opts.watch : {}
        for(let key in opts.data){
            this.setData(key)
        }
    }
    getBaseType(target){
        return Object.prototype.toString.call(target).slice(8,-1)
    }
    setData(_key){
        Object.defineProperty(this, _key, {
            get:function () {
                return this.$data[_key]
            },
            set:function (newVal) {
                const oldVal = this.$data[_key];
                if(oldVal == newVal){
                    return oldVal
                }
                else{
                    this.$data[_key] = newVal;
                    this.$watch[_key] && typeof this.$watch[_key] == 'function' && (
                        this.$watch[_key].call(this, newVal, oldVal)
                    )
                }
                return newVal;
            }
        })
    }
}

niuyueyang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现一个小型的watcher

watch.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script src="watch.js"></script> <script> let vm = new.
复制链接

扫一扫

专栏目录