双向绑定和单向数据流

木灵鱼儿 2020-11-12 23:42 2392

双向绑定和单向数据流

什么是双向绑定？

双向绑定指的是：数据model的更新会触发可视层的更新，而可视层的更新会触发数据model的更新。

这就是v-model绑定input元素所做的事情。

单向数据流

单向数据流：数据model的更新触发可视层的更新，而可视层的更新和model不会有任何关系。

vue的几个概念

vue是单向数据流，不是双向绑定
vue的双向绑定不过是语法糖
Object.defineProperty是用来做响应式更新的，和双向绑定没有关系。

v-model做了什么

v-model默认限制只能用在：input、select、textarea、components

也就是除了表单元素，还有可以用在组件上。

v-model实际上做了两件事：

默认绑定value属性
创建一个input事件，用于更新value

<input v-model="value" />

可以看成是

<input :value="value" @input="val=> (value=val)" />

vue会自动创建一个事件通过事件回调的方式更新数据，这就是所谓的双向绑定。

组件中的v-model

组件A

<template>
  <div>
    <select :value="phoneInfo" placeholder="区号"
      @change="handleAreaCodeChange">
      <option value="+86">+86</option>
      <option value="+60">+60</option>
    </select>
  </div>
</template>
<script>
export default {
  model: {
    prop: "phoneInfo", // 默认 value
    event: "change" // 默认 input
  },
  props:{
    phoneInfo: String,
  },
  methods:{
    handleAreaCodeChange(e){
      this.$emit("change",e.target.value)
    }
  }
}
</script>

调用组件

<template>
  <a v-modal="value" />
</template>

可以看到组件上有一个model属性，他是一个对象，有两个属性：

prop：表示要v-model默认要绑定的属性名，属性是props设置的，但是因为用了v-model，所以不用显式写出来
event：表示v-model默认生成什么自定义事件来触发更新，比如我设置一个event:"aabbccc"，那么如果我要更新这个v-model绑定的数据，必须要emit触发这个指定的事件this.$emit("aabbcc",参数)

这样的话我们可以在自定义的任何函数里进行更新了，不必局限于元素给定的事件方法。

事实上model是有默认值的：

export default {
    model:{
      prop:"value",
      event:"input"
    }
}

默认情况下model的prop指向的是value属性，这个value可以是props中设置的value，也可以data中的value，反正这个value是this上下文可以获取到的。甚至绑定在input元素上，value就是value属性。

event默认是input，表示input事件触发，这个input就是input元素的input事件。

所以，如果我们想省点事，我们可以直接给组件使用v-model双向绑定一个值，然后在组件内，通过props的value接收传递过来的数据，然后再通过$emit("input","xxxx")来触发更新。

当然，为了更好的语义化，我建议是在model中自定义一下，取一个合理的事件名，绑定到合理的数据名称上。

sync修饰符

v-model很好用，因为他缩减了我们书写的代码量，如果让你手动写一个事件更新的函数，那肯定头大，但是一个组件往往只能拥有一个v-model，所以，出现了sync修饰符。

sync就不多说了，本博客搜索sync就可以找到对应的文章。

sync实际上就是v-model的一个另一种存在形式，他的原理和v-model完全是相同的。

双向绑定和单向数据流