双向数据绑定

最新推荐文章于 2024-04-22 09:07:57 发布

tamia_nice

最新推荐文章于 2024-04-22 09:07:57 发布

阅读量56

点赞数

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

本文链接：https://blog.csdn.net/weixin_47144417/article/details/116666441

版权

vue 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

jqery的出现为我们解决了什么问题?

 1.提高开发效率

 2.处理了兼容性

jqery存在的弊端是什么？为什么会逐渐淘汰

 1.本质还是操作dom(性能不友好) 重绘与回流 
 2.没有做业务分层

前端三剑客

 html css js

vue1.0设计理念

1.没有虚拟dom
2.一对一   少量数据更新更快   性能更好
3.大量数据更新，性能差     （本质是更新dom）

vue2.0设计理念

1.虚拟dom加入

虚拟dom的弊端：

（第一次渲染会变慢）

虚拟dom的本质是什么？？？

 JS对象

虚拟dom是如何生成的

根据生成的真实dom

虚拟dom如何提升渲染效率

按需渲染，把dom操作放到了js里面

v-model实现原理

显示值

<input type="text" id="input">

   // v-model实现原理
    let   obj = {};
    // 1.要操作的对象
    // 2.操作的属性
    // 3.具体值
    Object.defineProperty(obj, 'username', {
      get : function () {
        console.log('取值');
      },
      set : function (val) {
        console.log('设置值');
        document.getElementById('input').innerText = val;

      }
    })

    document.getElementById('input').addEventListener('keyup',function () {
      console.log(event.target.value,111);
      obj.username = event.target.value;

    })

类Vue的响应式如何实现?

没实现，不知道哪里出了问题一边看学习视屏一边跟着写的。。。。。头大

在这里插入图片描述

<!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 id="app" style="height: 100px;">
        订阅试图-1: <div class="box1"></div> 
        订阅试图-2: <div class="box2"></div>

    </div>
    <script src="./index.js"></script>
    <script >
        let  dataObj = {};

        dataHijack({
            data: dataObj,
            tag: 'view-1',
            dataKey: 'one',
            selector: '.box1'
        })
        dataHijack({
            data: dataObj,
            tag: 'view-2',
            dataKey: 'two',
            selector: '.box2'
        })

        dataObj.one = "11111111111111";
        dataObj.two = '当年芴满床';
    </script>
</body>
</html>

// 类Vue的响应式如何实现
    // 订阅器模型
    let Dep = {
        // 容器
        clientList: {},
        // 订阅方法
        listen: function(key, fn) {
        //   if(!this.clientList[key]) {
        //     this.clientList[key] =  [];
        //   }
        //   this.clientList[key].push(fn) ;
          // vue源码短路表达式
        (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 dataHijack = function(data, tag, dataKey, selector) {
        let value = '',
          el = document.querySelector(selector);
        Object.defineProperty(data, dataKey, {
          get: function() {
            // console.log("取值");
            console.log(1.111);
            return value
          },
          set: function(newVal) {
            // 数据改变   通知所有订阅者
            value = newVal;
            console.log(1.2222);
            Dep.trigger(tag, newVal);
          }
        });
        // 添加订阅者
        Dep.listen(tag, function(text) {
            el.innerHTML  = text;
      
          })
      };

tamia_nice

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
双向数据绑定

jqery的出现为我们解决了什么问题? 1.提高开发效率 2.处理了兼容性jqery存在的弊端是什么？为什么会逐渐淘汰 1.本质还是操作dom(性能不友好) 重绘与回流 2.没有做业务分层前端三剑客 html css jsvue1.0设计理念1.没有虚拟dom2.一对一少量数据更新更快性能更好3.大量数据更新，性能差（本质是更新dom）vue2.0设计理念1.虚拟dom加入虚拟dom的弊端：（第一次渲染会变慢）虚拟dom的本质是什么？？
复制链接

扫一扫