深入Vue实现原理

短命女 2021-12-22 12:59 253阅读 0赞

跟着大佬撸原理

[https://www.jianshu.com/p/123146abdd1a][https_www.jianshu.com_p_123146abdd1a]

自己总结:

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<div>
        <input type="text" id="input-msg">
        <p id="output-msg"></p>
    </div>
    
    <script>
        var inputMsg = document.getElementById('input-msg');
        var outputMsg = document.getElementById('output-msg');
        var obj = {
            msg: 'hello'
        };
    
        var key = 'msg';
        
        var val = obj[key];
    
        Object.defineProperty(obj, 'value', {
            enumerable: true,
            configurable: true,
            set: function (newValue) {
                val = newValue;
                outputMsg.innerHTML = val;
                console.log('setter',val);
                console.log('setter',obj);
            },
    
            get: function () {
                console.log('getter',val);
                return val;
            }
        })
        inputMsg.addEventListener('input',function(e){
            obj['value'] = e.target.value;
            console.log(e.target.value)
        })
        console.log(obj)
    </script>

上面的Object.defineProperty监听obj的value，当在控制台打印obj.value的时候会走到get方法里面,当给obj.value = 2的时候，会走到set方法里面;

转载于:https://www.cnblogs.com/lsc-boke/p/11088359.html

[https_www.jianshu.com_p_123146abdd1a]: https://www.jianshu.com/p/123146abdd1a
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211220/5337b83dfc574c86aca4d92bbf2cabb2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，253人围观）

还没有评论，来说两句吧...

相关阅读

相关深入理解vue 一些底层原理

一　理解vue的核心理念使用vue会让人感到身心愉悦,它同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全. 倘若用

痛定思痛。/ 2022年12月28日 00:51/ 0 赞/ 157 阅读

相关深入了解 Vue3 模板编译原理

Vue 的编译模块包含 4 个目录： compiler-core compiler-dom // 浏览器 compiler-sfc // 单文件组件

我不是女神ヾ/ 2022年12月25日 01:47/ 0 赞/ 200 阅读

相关 Vue - 深入响应式原理

推荐：[Vue汇总][Vue] Vue - 深入响应式原理现在是时候深入一下了！Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaSc

川长思鸟来/ 2022年12月20日 06:07/ 0 赞/ 269 阅读

相关深入索引实现原理

一、基本概念： primary key : 与外键生成完整性约束，唯一非空。自动生成唯一索引 foreign key : 一个表的外健就是另外一

雨点打透心脏的1/2处/ 2022年06月06日 14:08/ 0 赞/ 226 阅读

相关深入理解BufferedInputStream实现原理

[https://blog.csdn.net/zhangping871/article/details/54016604][https_blog.csdn.net_zhangp

今天药忘吃喽~/ 2022年05月15日 03:22/ 0 赞/ 293 阅读

相关 ReentrantLock实现原理深入探究

前言这篇文章被归到Java基础分类中，其实真的一点都不基础。网上写ReentrantLock的使用、ReentrantLock和synchronized的区别的文章很多，研

Myth丶恋晨/ 2022年03月15日 16:16/ 0 赞/ 308 阅读

相关深入理解synchronized实现原理

四种锁状态 1. 无锁状态 2. 偏向锁 3. 轻量锁 4. 重量锁 JVM是如何来识别锁状态的 synchronized关键字是一个对象锁，锁的状态以及

叁歲伎倆/ 2022年01月29日 08:57/ 0 赞/ 404 阅读

相关 Vue响应式原理深入解析

Vue最明显的特性之一便是响应式系统，其数据模型即是普通的 JavaScript 对象。而当你读取或写入它们时，视图便会进行响应操作。响应式data： <div

阳光穿透心脏的1/2处/ 2021年12月24日 11:11/ 0 赞/ 350 阅读

相关深入Vue实现原理

跟着大佬撸原理 [https://www.jianshu.com/p/123146abdd1a][https_www.jianshu.com_p_123146abdd1a]

短命女/ 2021年12月22日 12:59/ 0 赞/ 254 阅读

相关深入理解synchronized实现原理

在多线程编程中，有可能会出现多个线程同时访问同一个共享、可变资源的情况，这种资源可能是对象、变量、文件等。由于线程执行的过程是不可控的，所以需要采用同步机制来协同对对象可变状态

快来打我*/ 2021年11月17日 05:58/ 0 赞/ 429 阅读