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 和 setget 是一个给属性提供的 getter 方法,set 是一个给属性提供的 setter 方法。

对象拥有了 getter 和 setter,我们可以把这种对象称为响应式对象

可以这里理解:对象只要被访问到,就一定会先调用getter函数。对象只要被重新赋值就,就一定会先调用setter函数数据被劫持了

Leave a Reply

Your email address will not be published. Required fields are marked *