【vue】Vue数据双向绑定原理及实现（持续更新。。。）

最新推荐文章于 2024-04-18 22:48:34 发布
最新推荐文章于 2024-04-18 22:48:34 发布
阅读量366 收藏 1
点赞数
分类专栏： vue 文章标签： js vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34838046/article/details/108476584
版权

原理

使用Object.defineProperty() 进行数据劫持。主要为修改对象中数值的getter和setter函数

let person = {}
let name = "张二狗"
Object.defineProperty(person,"name",{
	set:function(newValue){
        //在此增加该数据被设置的时候的操作
        //例如：
        console.log("set")
        
        name = newValue
	},
    get:function(){
        //在此增加该数据被设置的时候的操作
        //例如：
        console.log("get")
        
        return name
    }
}) 
person.name = "张三"			//设置数值，触发set函数
console.log(person.name)	 //读取数值，触发get函数

最简单的双向绑定

/*
	以下代码功能仅有数据的双向绑定，没有其他功能。
*/
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" />
    <p></p>
  </body>
</html>
<script>
  let data = {}
  let content = ''

  let input = document.querySelector('input')
  let p = document.querySelector('p')
  
  //设置get和setter
  Object.defineProperty(data, 'content', {
    set: function (newValue) {
      //数据更新时，更新页面  
      input.value = newValue
      p.innerText = newValue
        
      content = newValue
    },
    get: function () {
      return content
    },
  })
	//页面更新时，更新数据
  input.addEventListener('input', (e) => {
    data.content = e.target.value
  })
    
</script>

问题

defineProperty get 死循环

let person = {name:"张二狗"}
Object.defineProperty(person,"name",{
	set:function(newValue){
        person.name = newValue
	},
    get:function(){
        return person.name
    }
}) 
//原因，调用get，返回person.name时也会调用get，死循环。
//解决方案1：使用临时变量，setter和getter里设置和返回时操作临时变量。但是数据量大之后，不好操作。
//解决方法2：Object.defineProperty()包裹一层函数，利用js函数传值的性质，自动生成临时变量
function defineProperty(obj,key,val){
    /*
    	因为js是按值传递
    	相当于自动创建临时变量
    	let key = key
    	let val = val
    	set中操作临时变量不会造成死循环
   	*/
    Object.defineProperty(obj,key,{
	set:function(newValue){
        val= newValue
	},
    get:function(){
        return val
    }
}) 
}

Vue双向绑定实现（简化）

基础功能：数据和视图的双向更新，页面渲染

额外功能：v-model，v-on:click，文本插值(双大括号)识别

不足：代码乱七八糟的。查阅资料之后发现可以将部分代码提炼成对象。

​ 仅支持含有单个文本差值的文字节点（像是“{{name}}{{name}}"这种就不支持）

​

0.1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input v-model="name" type="text" />
      <p>{{name}}</p>
      <button v-on:click="clickEvent">点击</button>
    </div>
  </body>
</html>
<script>
  /*
      实现：v-model，v-on,插值渲染（仅支持只有单个插值的文本节点）

      逻辑：创建vue实例=》数据劫持=》dom树渲染，创建对应数据的watcher，添加到watcher数组
          =》页面更新=》元素绑定的时间触发对应数据的getter=》getter调用对应数据的更新函数，更新页面

  */

  function Watch(vm, value, callback) {
    //vue实例
    this.vm = vm
    //该watcher监听的数据
    this.value = value
    this.update = callback
    this.init()
  }
  Watch.prototype = {
    //watcher创建时，主动去触发对应属性值的getter，并加入vue实例中的watchers
    init: function () {
      this.vm.data[this.value]
      this.vm.watchers[this.value].push(this)
    },
  }

  function VueDemo(options) {
    this.el = document.querySelector(options.el)
    this.data = options.data
    this.methods = options.methods
    this.fragment = null
    this.watchers = []
    this.init()
  }
  VueDemo.prototype = {
    init: function () {
      if (!this.el) {
        console.log('根元素未找到')
        return
      }
      this.iterateData(this.data)
      //创建fragment
      this.fragment = this.createFragment(this.el)
      //渲染
      this.compile(this.fragment)
      this.el.appendChild(this.fragment)
    },
    //遍历data
    iterateData: function (data) {
      Object.keys(data).forEach((key) => {
        this.watchers[key] = []
        this.defineReactive(data, key, data[key])
      })
    },
    //劫持数据
    defineReactive: function (data, key, val) {
      let self = this
      Object.defineProperty(data, key, {
        get: function () {
          // console.log(key + ':get')
          return val
        },
        set: function (newValue) {
          // console.log(key + ':set')
          self.watchers[key].forEach((watcher) => {
            watcher.update(newValue)
          })
          val = newValue
        },
      })
    },
    //创建fragment
    createFragment: function (el) {
      let fragment = document.createDocumentFragment()
      while (el.firstChild) {
        //appedchild是移动而不是复制，才知道
        fragment.appendChild(el.firstChild)
      }
      return fragment
    },
    //解析dom树
    compile(el) {
      /*
        遍历节点
            判断节点类型
                元素类型
                    判断是否绑定了事件或者指令
                文本类型
                    判断是否含有文本差值
        */
      Array.prototype.slice.call(el.childNodes).forEach((node) => {
        let info = this.checkout(node)
        //如果是元素类型，判断是否有事件或者指令
        if (info.isElementNode && info.isDirective) {
          //事件指令
          if (info.isEventDirective) {
            info.events.forEach((event) => {
              this.compileEvent(node, event.name, event.value)
            })
            //v-model指令
          } else if (info.isModelDirective) {
            this.compileModel(node, info.modelName)
          }
          //如果是文本，判断是否有插值
        } else if (info.isTextNode && info.hasInterpolation) {
          //渲染插值
          this.compileText(node, info.interpolation.name)
        }
        if (info.hasChildNodes) {
          this.compile(node)
        }
      })
    },
    //渲染绑定事件的节点
    compileEvent: function (node, eventName, eventValue) {
      node.addEventListener(eventName, this.methods[eventValue])
    },
    //渲染带有v-model的节点
    compileModel: function (node, modelValue) {
      //绑定v-mdel
      let self = this
      new Watch(self, modelValue, function (value) {
        // console.log("model");
        self.updateModel(node, value)
      })
      node.addEventListener('input', (e) => {
        if (e.target.value == this.data[modelValue]) return
        console.log(e.target.value)
        this.data[modelValue] = e.target.value
      })
      this.updateModel(node, this.data[modelValue])
    },
    //带有v-model的节点的更新方法
    updateModel: function (node, value) {
      node.value = value
    },
    //渲染文本节点
    compileText: function (node, interpolation) {
      //正则不会，先单个替换
      this.updateText(node, this.data[interpolation])
      let self = this
      new Watch(self, interpolation, function (value) {
        // console.log("text");
        self.updateText(node, value)
      })
    },
    //文本节点更新方法
    updateText: function (node, value) {
      node.nodeValue = value
    },
    //处理dom节点的信息，返回信息数组
    checkout: function (node) {
      let info = {
        //节点类型
        isElementNode: false,
        isTextNode: false,
        //是否有指令
        isDirective: false,
        //指令数组
        directives: [],

        //是否有事件指令
        isEventDirective: false,
        //事件数组
        events: [],
        //是否有v-model指令
        isModelDirective: false,
        modelName: '',
        //是否有差值
        hasInterpolation: false,
        interpolation: { name: '' },
        //是否有子节点
        hasChildNodes: false,
      }
      if (node.nodeType == 1) {
        info.isElementNode = true
        Array.prototype.slice.call(node.attributes).forEach((attr) => {
          if (attr.name.indexOf('v-') != -1) {
            info.isDirective = true
            info.directives.push({ name: attr.name, value: attr.value })
          }
          if (attr.name.indexOf('v-on') != -1) {
            info.isEventDirective = true
            info.events.push({
              name: attr.name.split(':')[1],
              value: attr.value,
            })
          }
          if (attr.name.indexOf('v-model') != -1) {
            info.isModelDirective = true
            info.modelName = attr.value
          }
        })
      } else if (node.nodeType == 3) {
        info.isTextNode = true
        var reg = /\{\{(.*)\}\}/
        if (reg.test(node.nodeValue)) {
          info.hasInterpolation = true
          info.interpolation.name = reg.exec(node.nodeValue)[1]
        }
      }
      if (node.childNodes.length != 0) {
        info.hasChildNodes = true
      }
      return info
    },
  }

  let demo = new VueDemo({
    el: '#app',
    data: {
      name: '张二狗',
    },
    methods: {
      clickEvent: function () {
        alert('click')
      },
    },
  })
</script>
前端二狗子
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目中 localStorage 的用法建议
happy81997的博客
06-17 1469
很多人在用 或 的时候喜欢直接用，明文存储，直接将信息暴露在；浏览器中，虽然一般场景下都能应付得了且简单粗暴，但特殊需求情况下，比如设置定时功能，就不能实现。就需要对其进行二次封装，为了在使用上增加些安全感，那加密也必然是少不了的了。为方便项目使用，特对常规操作进行封装。不完善之处会进一步更新...封装之前先梳理下所需功能，并要做成什么样，采用什么样的规范，部分主要代码片段是以 作为示例，最后会贴出完整代码的。可以结合项目自行优化，也可以直接使用。 设置 setStorage Storage 本身
Vue数据双向绑定原理及简单实现方法
08-27
Vue 数据双向绑定原理及简单实现方法 数据双向绑定是 Vue 框架的核心特性之一，它通过数据劫持结合发布者-订阅者模式来实现的。下面将详细介绍 Vue 数据双向绑定原理及简单实现方法。 一、数据劫持 Vue 中的数据...
VUE 缓存 设置缓存 使用缓存
热门推荐
a_靖的博客
08-06 2万+
QQ技术交流群173683866 526474645 欢迎加入交流讨论，打广告的一律飞机票 VUE.JS 使用缓存我建议用good-storage ，简单方便好用，下面来看看怎么使用它 good-storage 是一个插件，需要安装 localStorage 临时缓存（主动清除缓存才会销毁） sessionStorage 长期缓存（关闭浏览器自动销毁） 安装步骤： 在命令行安装 ...
3分钟带你搞懂Vue双向绑定原理及问题剖析
最新发布
2401_84097393的博客
04-18 1448
二、Vue的双向绑定⌚双向绑定的原理Vue数据双向绑定原理是通过的方式来实现的，首先是对，然后当则告诉订阅者是否要更新，若更新就会通过来劫持各个属性的settergetter，在数据发生变动时通知Vue实例，触发相应的​getter​和​setter​回调函数。当把一个普通 Javascript 对象传给Vue 实例来作为它的 data 选项时， Vue 将遍历它的属性，用将它们转为 ​​。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。
Vue——打造权限系统
Nick_YangXiaoTong的博客
12-14 477
作者自述： 在多页面Vue项目中，如何优雅的的进行权限匹配 解决痛点： 复杂的身份判断 —— 在日常开发中经常用 || &amp;amp;&amp;amp; 来进行身份验证从而处理DOM的显隐已经业务逻辑的交互 添加新身份以往的逻辑全部需要重现处理 依赖： 正则表达式 Array.filter 闭包 实现思路 创建业务字典项（要求按照业务功能级别拼接） 创建身份字典项（后期扩展和维护）...
localStorage的高阶用法
qq_51076413的博客
07-04 418
localStorage 的高阶用法
Vue模块化以及封装Storage组件实现保存搜索的历史记录
weixin_42113716的博客
09-04 445
Vue模块化以及封装Storage组件实现保存搜索的历史记录
详解Vue双向数据绑定原理解析
08-29
Vue 双向数据绑定是 Vue 框架中的一种核心机制，实现数据和视图之间的双向绑定。下面是对 Vue 双向数据绑定原理的详细解析。 基本原理 Vue 采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty...
浅谈vue中数据双向绑定的实现原理
08-29
Vue中的数据双向绑定实现原理 在Vue框架中，数据双向绑定是指视图层和数据层之间的相互影响关系。当数据层的数据发生变化时，视图层也会相应地更新；同样，当视图层的数据发生变化时，数据层也会相应地更新。这种...
Vue 3.0双向绑定原理的实现方法
10-16
主要为大家详细介绍了Vue 3.0双向绑定原理的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
详解vue的双向绑定原理及实现
10-17
主要介绍了vue双向绑定原理及实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue/小程序/uniapp项目中使用storage本地存储-函数封装
JackieDYH的博客
12-07 2141
storage.js // 存储 const _setStorage = (key, value)=>{ sessionStorage.setItem(key, JSON.stringify(value)); } // 查找 const _getStorage = (key)=>{ return JSON.parse(sessionStorage.getItem(key)); } const _getForIndexStorage = (index)=>{ r
Vue开发中使用vuex-数据持久化插件store-案例
JackieDYH的博客
04-13 1582
store是存储数据到本地浏览器 安装 npm install store -save 使用 // 存储变量到user键 store.set('user', { name:'Marcus' }) //获取内容 store.get('user') // 删除键 store.remove('user') // 清除所有的键 store.clearAll() // 循环显示所有的键值对 store.eachEach(function(key, value) { console...
Vue中封装一个localStorage工具类，如何引用？
前端互助会
01-25 801
示范：在vue框架中配置一个localStorage工具类，然后引用！ 首先，在src下建立一个文件夹utils，再在utils下建立一个js,tools.js; 在tools.js中封装localStorage // 封装本地存储的方法 var prototype={ $setStroage(key, value) { //对象必须序列化才能存入缓存 localStorage.setItem(key, JSON.stringify(value));
Vuex中的$store.state和Storage的区别
加油小伙子
08-05 2807
1、存储位置及类型： Storage 是存在本地缓存； Vuex 是存储在内存中。 localStorage 和 sessionStorage 只能存储字符串类型，对于复杂的对象可以封装storage 2、实效性： localStorage（本地存储）存储在本地，永久保存； sessionStorage（会话存储），临时保存，页面关闭即失效； Vuex 页面刷新时会失效，因为 Vuex 是存在内存中，当页面（F5）刷新时属于清除内存，Vuex 存储的值会丢失。因此需要重新拉取解决这一问题 3
vue中使用storage存储与使用
Zhencode的博客
11-07 1万+
storage封装成模块storage.js const storage={ /设置/ set(key,value){ localStorage.setItem(key,Json.stringify(value)) } /获得/ get(key){ return Json.parse(localStorage.getItem(key)) } /移除/ remove(key){ l...
本地存储localStorage以及它的封装接口store.js的使用
weixin_34357962的博客
11-20 660
本地存储localstorage localstorage 是 HTML5 提供的在客户端存储数据的新方法，主要作用是将数据保存在客户端中，并且数据是永久保存的，除非人为干预删除。 localstorage作为本地存储来使用，解决了cookie存储空间不足的问题：cookie中每条cookie的存储空间为4k，但localStorage的...
数据存储工具箱—Vue项目中对Storage的封装
weixin_43488503的博客
10-07 646
数据存储工具箱—Vue项目中对Storage的封装
LocalStorage，该提升下逼格了
qq_40063198的博客
06-27 268
localStorage 么？该提升下逼格了
vue3 的数据双向绑定原理
05-01
Vue3 的数据双向绑定原理是通过 Proxy 对象实现的。Proxy 对象是 ES6 中的新功能，它可以用来代理另一个对象，从而可以对这个对象进行监视和修改。在 Vue3 中，每一个组件都有一个用于数据存储的响应式对象。当这个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值