博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue的双向数据绑定原理
阅读量:6957 次
发布时间:2019-06-27

本文共 1091 字,大约阅读时间需要 3 分钟。

原理、

vue是采用数据劫持结合发布者-订阅者模式的方式, 通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调,我们先来看看object.defineProperty()这个方法

var obj  = {};Object.defineProperty(obj, 'name', {        get: function() {            console.log('我被获取了')            return val;        },        set: function (newVal) {            console.log('我被设置了')        }})obj.name = 'fei';//在给obj设置name属性的时候,触发了set这个方法var val = obj.name;//在得到obj的name属性,会触发get方法 vue是通过数据劫持来做数据绑定,其中最核心的方法是通过object.defineProperty()来实现对属性的劫持,那么在设置或者获取的时候我们使用set或者get方法里触发其他的函数,达到监听数据变动的目的 先看原理图:

observer用来实现对每个vue中的data中定义的属性循环用Object,defineProperty()实现数据劫持,以便利用其中的setter和getter,然后通知订阅者,订阅者会触发它的update方法,对师徒进行更新

在vue中v-model,v-name,{

{}}等都可以对数据进行显示,也就是说假如一个属性都通过这三个指令了,那么每当这个属性改变时候,相应的这个三个指令的HTML视图也必须改变,于是vue中就是每当有这样的可能用到双向绑定的指令,就在一个Dep中增加一个订阅者,其订阅者只是更新自己的指令对应的数据,也就是v-model='name'和{
{name}}有两个对应的订阅者,各自管理自己的地方。每当属性的set方法触发,就循环更新Dep中的订阅者。

双向数据绑定给人的最大的优越感就是方便。当数据data发生变化时,页面自动发生更新。但是有一个缺点也是因为自动更新而导致的,因为这样你就不知道data什么时候变了,也不知道是谁变了,变化后也不会通知你,当然你可以watch来监听data的变化,但是这变复杂了,还不如单向数据绑定

转载于:https://www.cnblogs.com/longsf/p/10445534.html

你可能感兴趣的文章
别再逼三星了,它在起死回生的路上挣扎很久了
查看>>
sql server 高可用故障转移(6)
查看>>
elasticsearch插件二—— kibana插件安装详解(Elasticsearch教程09)|MVP讲堂
查看>>
Kubernetes 1.8.x 全手动安装教程
查看>>
Python.Unix和Linux系统管理指南
查看>>
在K8S上使用RancherVM,以容器的方式跑虚机
查看>>
Unity3dC#位运算讲解与示例
查看>>
解决ASP.NET中Redis 每小时6000次访问请求的问题
查看>>
Canvas自定义图片大小及蒙版与生成gif图
查看>>
《饥饿的盛世》读后感
查看>>
你可能不知道的 css 内容块
查看>>
SourceTree 教程文档(安装并设置SourceTree)
查看>>
solr6.6教程-基础环境搭建(二)
查看>>
C# WPF 低仿网易云音乐(PC)Banner动画控件
查看>>
提交自己的包到bower、npm中
查看>>
详解 JavaScript 的私有变量
查看>>
网站建设在“互联网+”时代的发展趋势
查看>>
脚本语言不行?JavaScript 重写 Office 365 已进入尾声
查看>>
日志框架 - 基于spring-boot - 设计
查看>>
R语言基础操作①
查看>>