vue2双向数据绑定和数据响应式

徐嘉迪

已于 2022-07-16 21:18:45 修改

阅读量312

点赞数

分类专栏：吐血之作文章标签： javascript 前端开发语言

于 2022-07-16 21:17:13 首次发布

本文链接：https://blog.csdn.net/weixin_45917382/article/details/125825133

版权

吐血之作专栏收录该内容

6 篇文章 0 订阅

订阅专栏

vue2双向数据绑定

通过Object.defineProperty来实现.
get负责依赖搜集
set数据更改时进行通知

vue2数据响应式

需要有通知机制数据发生变化你要去通知模板
需要 发布订阅模式加上数据劫持Object.defineProperty才能完成

响应式特性：

1.数据联动（双向绑定）
2.需要捕获到修改

代码实现

index.js

//订阅器模型
let Dep = {
  clientList: {}, //容器
  //添加订阅
  listen: function (key, fn) {
    //第二种写法  短路表达式   fn:附送消息
    (this.clientList[key] || (this.clientList[key] = [])).push(fn);
  },
  //发布
  trigger: function () {
    let key = Array.prototype.shift.call(arguments), //类数组转数组
      fns = this.clientList[key];
    if (!fns || fns.length === 0) {
      return false;
    }
    for (let i = 0, fn; (fn = fns[i++]); ) {
      fn.apply(this, arguments);
    }
  },
};
  //数据劫持
  let dataHi=function({data,tag,datakey,selector}){
    let value='',
        el=document.querySelector(selector)
    Object.defineProperty(data,datakey,{
        //取值
        get:function(){
            console.log("取值");
            return value
        },
        set:function(val){
            console.log("设置值");
            value=val,
            //发布
            Dep.trigger(tag,val)
        } 
    })
    //订阅
    Dep.listen(tag,function(text){
        el.innerHTML=text
    })
  }

index.html

<!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>
</head>
<body>
    <div class="app">
        订阅视图-1 ：<span class="box-1"></span>
        <br>
        订阅视图-2 ：<span class="box-2"></span>
    </div>
    <script src="index.js"></script>
    <script>
        let obj={}
        dataHi({
            data:obj,
            tag:'view-1',
            datakey:'one',
            selector:'.box-1'
        })

         
        dataHi({
            data:obj,
            tag:'view-2',
            datakey:'two',
            selector:'.box-2'
        })

        //1.初始化赋值 一次
        obj.one='这是视图一'
        obj.two='这是视图二'
        //2.劫持数据，更新者负责重新渲染 N次



        
    </script>
</body>
</html>