zoukankan      html  css  js  c++  java
  • 自己搭建一个类似vue,实现响应式的原理

    首先创建一个名为kvue.js的文件

    class Kvue {
      constructor(option) {
        // 获取data
        this._data = option.data
        // 获取data里面的对象-观察者
        this.observer(this._data)
      }
      observer(obj) {
        if(typeof obj !== 'object') return
        Object.keys(obj).forEach(key => this.defineReactive(obj, key, obj[key]))
      }
      cb() {
        console.log('更新数据')
      }
      defineReactive(obj, key, val) {
        this.observer(val)
        let staging = val
        let _this = this
        Object.defineProperty(obj, key, {
          get() {
            console.log(`获取${key}数据`)
            return staging
          },
          set(newVal) {
            staging = newVal
            // 如果newVal不等于val则表示数据更新了,相应的变化也要跟着数据的变化而变化
            if(newVal !== val) {
              console.log(`更新${key}数据`)
              _this.cb()
            }
          }
        })
      }
    }
    

      然后在一个html文件中引用这个js文件,并new这个kvue类

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="Kvue.js"></script>
      </head>
      <body>
      </body>
      <script>
        const kvue = new Kvue({
          data: {
              msg: {
                detail: "lll"
              },
              test: "2348"
            }
          })
        console.log(JSON.stringify(kvue._data), kvue._data.test)
        kvue._data.test = '测试'
        kvue._data.msg.detail = '12083'
        console.log(JSON.stringify(kvue._data), kvue._data.test)
        kvue._data.msg.detail = '12083'
        console.log(JSON.stringify(kvue._data), kvue._data.test)
      </script>
    </html>
    

      在浏览器中直接打开这个html文件可以看到打印情况

  • 相关阅读:
    [NOIP2013]华容道
    [随笔]冲NOIP一等奖。。
    [NOIP2015]联合权值
    [随笔]我回来啦!
    [考试]20151105
    [知识点]最近公共祖先LCA
    [BZOJ3751/NOIP2014]解方程
    [旧版][知识点]字符串Hash
    NOIP2016题解
    NOIP2016游记
  • 原文地址:https://www.cnblogs.com/wangxirui/p/12707710.html
Copyright © 2011-2022 走看看