VUE的有一个特性叫双向绑定!但它这个双向绑定并不是一个真正的双向绑定,而是两个单向绑定。

上图,你就可以理解这是VUE的双向绑定大致图,但实际情况要比这个复杂的多。下面我们来分析一下VUE的双向绑定中重要的一个环节:变量响应式
var app = new Vue({
el: '#app',
data: {
message: 'web开发工程师'
},
methods: {
changeMsg() {
this.message = 'PHP开发工程师'
}
}
})
实例化一个VUE 实例,如果你有点基础的话! 这里的this.message
变量默认“web开发工程师”,但当用户触发changeMsg()
这个方法之后,this.message
变量的值就会变成“PHP开发工程师”。
如果你完全不懂这里的逻辑,你会认为这不就是一个变量重新赋值吗?很难吗?
可是你从上面的代码的结构你会发现,this.message
就可以去到 data对象里面的message值了,不应该是this.data.message
吗? 这里就涉及了另一个知识点:VUE变量代理(这里不展开讨论,以后会讲到的)
那么从我们执行 this.message = 'PHP开发工程师'
这段代码的时候导致发生了什么呢?
Object.defineProperty(obj, prop, descriptor)
Object.defineProperty
方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象 ,但IE8及以下的版本不支持该函数,这也是VUE不止IE8 及以下的版本 游览器的原因。
obj
是需要定义属性的对象;prop
是需要定义或修改的属性的名称;descriptor
是将被定义或修改的属性描述符。
比较核心的是 descriptor
,它有很多可选键值,具体的可以去参阅它的文档。这里我们最关心的是 get
和 set
,get
是一个给属性提供的 getter 方法,set
是一个给属性提供的 setter 方法。
对象拥有了 getter 和 setter,我们可以把这种对象称为响应式对象
可以这里理解:对象只要被访问到,就一定会先调用getter函数。对象只要被重新赋值就,就一定会先调用setter函数。数据被劫持了