首页 > 其他分享 >109.vue双向数据绑定原理

109.vue双向数据绑定原理

时间:2023-07-14 23:11:54浏览次数:52  
标签:订阅 vue 绑定 109 Model 数据 属性

109. vue 双向数据绑定原理?

vue 通过使用双向数据绑定,来实现了 View 和 Model 的同步更新。vue 的双向数据绑定主要是通过使用数据劫持和发布订阅者模式来实现的。

首先我们通过 Object.defineProperty() 方法来对 Model 数据各个属性添加访问器属性,以此来实现数据的劫持,因此当 Model 中的数据发生变化的时候,我们可以通过配置的 setter 和 getter 方法来实现对 View 层数据更新的通知。

数据在 html 模板中一共有两种绑定情况,一种是使用 v-model 来对 value 值进行绑定,一种是作为文本绑定,在对模板引擎进行解析的过程中。

如果遇到元素节点,并且属性值包含 v-model 的话,我们就从 Model 中去获取 v-model 所对应的属性的值,并赋值给元素的 value 值。然后给这个元素设置一个监听事件,当 View 中元素的数据发生变化的时候触发该事件,通知 Model 中的对应的属性的值进行更新。

如果遇到了绑定的文本节点,我们使用 Model 中对应的属性的值来替换这个文本。对于文本节点的更新,我们使用了发布订阅者模式,属性作为一个主题,我们为这个节点设置一个订阅者对象,将这个订阅者对象加入这个属性主题的订阅者列表中。当 Model 层数据发生改变的时候,Model 作为发布者向主题发出通知,主题收到通知再向它的所有订阅者推送,订阅者收到通知后更改自己的数
据。

详细资料可以参考:
《Vue.js 双向绑定的实现原理》

标签:订阅,vue,绑定,109,Model,数据,属性
From: https://www.cnblogs.com/zhuoss/p/17555303.html

相关文章

  • Vuex是什么,怎么使用?
    Vuex是一个状态管理库,它为Vue应用程序提供了一个集中式的存储管理机制,用于管理不同组件之间共享的状态数据。Vuex将该状态存储在一个单一的对象树中,这使得在整个应用程序中追踪状态变化变得更加容易和可预测。当我们在一个Vue.js应用程序中编写代码时,我们会遇到以下问题:多个组件需......
  • Vue2或Vue3中实现页面锚点滚动(结合AntDesign a-steps
    核心代码 onStepChange(current){ this.current=current; document.querySelector(`[id='${current}']`).scrollIntoView({ behavior:"smooth",//定义过渡动画instant立刻跳过去smooth平滑过渡过去 block:"start",//定义垂直滚动方向的对齐start顶部(......
  • vue3项目 运行 报错 Cannot assign to "b" because it is a constant
    环境依赖node18.16.0vite4.4.4vue 3.2.47背景当前错误与环境依赖关系不大,是由于我在打包的文件写的代码错误导致的,一般情况不会有这个错报错信息X[ERROR]Cannotassignto"b"becauseitisaconstantThesymbol"b"wasdeclaredaconstanthere:原因将r......
  • vue前端异步请求,数据拿的太慢,页面无法渲染
    vue中发送请求,拿到数据后打开弹窗进行页面渲染,问题:请求速度太慢,弹窗没有数据,解决:使用async和await进行同步请求 async用在方法上,await放在请求前,表示阻塞 ......
  • Vue路由跳转时携带参数
    在方法中使用this.$router.push方法进路由跳转时,需要携带参数,可以使用上下文参数,这样携带的话参数会一直存在,具体携带方式如下 在跳转路径下,添加state对象属性,属性名是固定的,对象中填入自己需要传递的参数,ps:对象需要转化为字符串,不然传递不过去,JSON。stringify方法进行字符串......
  • Vue3 webSocket收到消息改变响应式全局对象从而实时改变界面
    需求在main.js中创建一个 响应式全局对象。通过WebSocket收到消息改变这个全局对象时,子组件应同步响应。效果:这几个标签框绑定的全局对象json main.js定义 响应式全局对象//全局对象constglobalData=reactive({extTelMonitorData:[{title:......
  • VUE接收后端传递的map,解析并遍历
    后端传递map结果,前端接收时需要进行参数转化,转为前端的map,Object.entries方法进行转化,遍历时使用forof进行遍历,图中的item取出来的时一个数组对象,如{a:1,b:2},map对象时这样,item遍历第一轮时取出来的格式是[a,1],所有使用item[0]就可以取出key值,item[1]就可以取出value值 ......
  • Vue3 响应式全局对象
    需求在main.js中创建一个 响应式全局对象。改变这个全局对象时,子组件应同步响应。效果:这几个标签框绑定的全局对象jsonmain.js定义 响应式全局对象//全局对象constglobalData=reactive({extTelMonitorData:[{title:'用户组一',......
  • vue进行页面跳转样式丢失问题
    问题:vue使用 this.$router.push方法进行页面跳转时样式丢失,如下图,图一为正常页面,图二为跳转后的界面  解决方法:并非样式丢失,而是样式背覆盖了,去跳转的原界面样式中加入scope,跳转之后问题解决 ......
  • vue 实现自定义主题切换+日夜切换
    此处只参考修改主题色,日夜模式参考elep官网functiongradientColor(this:any,startColor:any,endColor:any,step:any){letstartRGB=gradientColor.prototype.colorRgb(startColor);//转换为rgb数组模式letstartR=startRGB[0];letstartG=star......