vue响应式原理与双向数据的深入解析


Posted in Vue.js onJune 04, 2021

了解object.defineProperty 实现响应式

清楚 observe/watcher/dep 具体指的是什么

了解 发布订阅模式 以及其解决的具体问题

在Javascript里实现数据响应式一般有俩种方案,分别对应着vue2.x 和 vue3.x使用的方式,他们分别是:

对象属性拦截 (vue2.x) Object.defineProperty
对象整体代理 (vue3.x) Proxy

提示:以下是本篇文章正文内容,下面案例可供参考

vue-响应式是什么?

Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript对象。而当你修改它们时,视图会进行更新。这使得状态管理非常简单直接,不过理解其工作原理同样重要,这样你可以避开一些常见的问题。在这个章节,我们将研究一下

Vue 响应式系统的底层的细节。

vue-响应式如何实现的?

数据响应式:数据模型仅仅是普通的JavaScript对象,而当我们修改数据时,视图会进行更新,避免了频繁的DOM操作,提高开发效率,这与Jquery不一样,Jquery是频繁的操作Dom

对双向数据绑定的理解

数据改变,视图改变,视图改变,数据也随之改变( 通过这句话,我们可以看到在双向绑定中是包含了数据响应式的内容)

​ 我们可以使用v-model 在表单元素上创建双向数据绑定

数据驱动是Vue最独特的特性之一

​开发过程中仅仅需要关注数据本身,不需要关心数据是如何渲染到视图中的。主流的MVVM框架都已经实现了数据响应式与双向绑定,所以可以将数据绑定到DOM上。

在vue.js中,所谓的数据驱动就是当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom。

对数据驱动的理解:

那么vuejs是如何实现这种数据驱动的呢?

vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter,但是在内部它们让Vue 追踪依赖,在属性被访问和修改时通知变化。

vue的数据双向绑定

将MVVM作为数据绑定的入口,整合Observer,Compile和Watcher三者,通过Observer来监听自己的model的数据变化,通过Compile来解析编译模板指令(vue中是用来解析{{}}),最终利用watcher搭起observer和Compile之间的通信桥梁,达到数据变化—>视图更新;视图交互变化(input)—>数据model变更双向绑定效果。

对vue-双向数据的分析?/v-model 双向数据绑定的原理

代码如下(示例):

<script>
    // Object 大小写 value 书写
    let data = {
      name: '李白',
      age: 18
    }

    Object.keys(data).forEach(key => {
      defineReactiveProperty(data, key, data[key])
    })

    function defineReactiveProperty(data, key, value) {
      Object.defineProperty(data, key, {
        // get获取
        get() {
          return value
        },
        // set 赋值
        set(newVaue) {
          if (newVaue === value) {
            return
          }
          value = newVaue
          compine()
        }
      })
    }
    compine()
  </script>
</body>

</html>
function compine () {
  // 通过document.querySelect('#app').childNodes 获取app下所有的子元素
  const nodes = document.querySelector('#app').childNodes
  // 输出一下这个值 当前这个值是一个层级嵌套的数组我们通过foreach 
  // console.log(nodes)

  nodes.forEach(item => {
    // 再输出一下item html:49 <input type=​"text" v-model=​"name">​ 是一个input 输入框
    // console.log(item)
    // 筛选出当前是标签的 ,因为nodes这个输出会将空格以‘text' nodeType为3,而标签nodetype是1,if判断筛选出是标签的
   if (item.nodeType === 1){
     const attrs = item.attributes
      // console.log(attrs)  {0: type, 1: v-model, type: type, v-model: v-model, length: 2} 返回了一个是数组
    Array.from(attrs).forEach( arr => {
        // console.log(arr) //  texgt= 'text' v-mode: 'name' ,筛选出这个v-model
        if (arr.nodeName === 'v-model'){
            item.value = data[arr.nodeValue]
            item.addEventListener('input',e => {
              console.log(e.target.value)
              //  
              data[arr.nodeValue] = e.target.value
            })
        }
      })
   }
  })
}

总结

vue响应式原理与双向数据的深入解析

  • 数据响应式的实现无非是对象属性拦截,我们使用 Object.defineProperty 来实现,在vue3中使
    用 Proxy 对象代理方案进行了优化
  • 面试宝典上提到的几个专业名词
    observe 对象指的是把数据处理成响应式的对象
    watcher 指的其实就是数据变化之后的更新函数 (vue中的watcher有两种,一种是用来更新视图的watcher,一种是通过watch配置项声明的watcher)
    dep 指的就是使用发布订阅实现的收集更新函数和触发更新函数的对象
  • 指令实现的核心无非是通过模板编译找到标识然后把数据绑上去,等到数据变化之后再重新放一次
  • 发布订阅模式的本质是解决一对多的问题,在vue中实现数据变化之后的精准更新

到此这篇关于vue响应式原理与双向数据的文章就介绍到这了,更多相关vue响应式原理与双向数据内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
vue基于Teleport实现Modal组件
May 31 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
vue基于Teleport实现Modal组件
Vue+Element UI实现概要小弹窗的全过程
vue-cli4.5.x快速搭建项目
Vue CLI中模式与环境变量的深入详解
springboot+VUE实现登录注册
May 27 #Vue.js
You might like
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
php判断目录存在的简单方法
2019/09/26 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
javascript特殊用法示例介绍
2013/11/29 Javascript
js实现按一下删除键删除整个单词附demo
2014/09/05 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
Python中atexit模块的基本使用示例
2015/07/08 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
python对csv文件追加写入列的方法
2019/08/01 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
python 生成器需注意的小问题
2020/09/29 Python
建筑文秘专业个人求职信范文
2013/12/28 职场文书
运动会解说词50字
2014/01/18 职场文书
护理专业自荐信范文
2014/02/26 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS