vue重要核心精简实战代码

电玩女神 2022-12-27 08:29 113阅读 0赞

let data = {shuzi:0}
            let active 
            //这行开始vue的响应式 内部逻辑核心代码学习
            function xiangyingshi(data) {
                console.log('这里开始核心逻辑了')
                for(let key in data) {
                    let value = data[key] //对象对应的值
                    let dep = []
                    Object.defineProperty(data,key,{
                        get(){
                            console.log('我进入Object.definePropertyget里面了')
                            if(active) {
                                dep.push(active)
                            }
                            return value
                        },
                        set(newValue) {
                            console.log('我进入Object.defineProperty set里面了')
                            value = newValue
                            dep.forEach(watcher =>watcher())
                        }
                    })
                }
            }
            xiangyingshi(data)
            const watcher = (fn)=>{
                active = fn 
                fn()
                active = null
            }
            watcher(()=>{
                app.innerHTML = data.shuzi
            })
            watcher(()=>{
                console.log(data.shuzi)
            })

发表评论取消回复

表情：

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

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

相关阅读

相关 java代码精简之道

java代码精简之道 1.利用语法 1.1.利用三元表达式 1.2.利用 for-each 语句

秒速五厘米/ 2023年03月14日 08:19/ 0 赞/ 8 阅读

相关 php 代码优化实例,数据库实例化操作的代码优化写法，核心种进行精简了…

数据库实例化操作的代码优化写法，核心类进行精简了…… 本帖最后由 xjl756425616 于 2013-07-16 16:59:50 编辑 class ActiveRec

小鱼儿/ 2023年01月15日 14:21/ 0 赞/ 94 阅读

相关 Vue加载.md格式组件核心代码

参考[vue-markdown-loader][] 参考[Element源码系列——Vue加载Markdown格式组件上篇][Element_Vue_Markdown]

曾经终败给现在/ 2023年01月07日 04:54/ 0 赞/ 221 阅读

相关 vue重要核心精简实战代码

let data = {shuzi:0} let active //这行开始vue的响应式内部逻辑核心代码学习

电玩女神/ 2022年12月27日 08:29/ 0 赞/ 114 阅读

相关 Kafka核心技术与实战 07 08 重要的集群参数配置

> 那些要修改默认值的参数 Broker端 Broker `log.dirs`：这是非常重要的参数，指定了 Broker 需要使用的若干个文件目录路径。要知

快来打我*/ 2022年10月15日 07:00/ 0 赞/ 154 阅读

相关 Java 代码精简之道

> 原文链接https://mp.weixin.qq.com/s/A1Z8YZyqQsFqK1TA1dTl2Q 1.利用语法 1.1.利用三元表达式普通

你的名字/ 2022年10月11日 01:15/ 0 赞/ 180 阅读

相关 html js精简倒计时代码

简洁实用的倒计时代码 <!doctype html> <html> <head> <meta charset="utf-

谁践踏了优雅/ 2022年06月11日 07:06/ 0 赞/ 180 阅读

相关代码精简之Lombok

JavaWeb项目开发中，JavaBean总是不可避免的出现，随之而来的就是大量的getter、setter方法，虽然大部分的开发工具（比如Eclipse等）都支持自动生成这些

素颜马尾好姑娘i/ 2022年06月08日 00:14/ 0 赞/ 182 阅读

相关 30个精简代码的技巧

前言：优化代码，一个很重要的课题。可能有些人觉得没用，一些细小的地方有什么好修改的，改与不改对代码的运行效率有什么影响呢？这个问题我是真么考虑的，好比人吃饭，吃一粒

向右看齐/ 2022年04月13日 07:58/ 0 赞/ 229 阅读

相关精简自己20%的代码

持续重构，其乐无穷。一：发现问题　　先来说如何重构业务层的try\{\}catch\{\}finally\{\}代码块，我看过很多代码，异常处理这一块大致分为两种情况，

快来打我*/ 2021年11月01日 20:32/ 0 赞/ 286 阅读