今天洗澡的时候在听 饥人谷的模拟面试 (五) 的时候，一直觉得这次面试的学生有点差，如果是我来面话可能已经让他回家了，但是 方方老师 很有耐心，在中间问道 .sync 的时候我 ???? 完全没有印象了。
正好已经有2个月没有更新了，所以复习一下 v-bind 的三个修饰符 [ .prop, .camel, .sync ]
首先就是 .sync
.sync(2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的v-on侦听器。
直接看文档里边的这段话，可能会有点懵，但是可以大概猜到是更新单向流数据相关的。
然后看文档里边的 Demo 👇
<!-- 向子组件传入 title, 并且接收update事件更新title -->
<text-document v-bind:title="doc.title" v-on:update="doc.title = $event" />然后通过子组件的 this.$emit('update:title', newTitle) 触发 update:title 事件,
不过正常时候的业务代码我不会这样写，会习惯使用以下的代码（不过没差啦，意思都一样）
<text-document :title="doc.title" @update="title => doc.title = title" />然后通过子组件的 this.$emit('update', newTitle) 触发更新
虽然精简了一点，但是还是很冗余，所以轮到 .sync 这个语法糖出场，可以更加精简父组件的代码：
<text-document :title.sync="doc.title" />
可以看到就是省略了接受子组件的 update 事件，像 v-model 这个语法糖一样双向绑定了数据。
需要注意一点的是，使用
.sync这个语法糖，需要子组件内的$emit触发的事件以update:myPropName的形式来命名
所以我自己的遍码习惯就触发不了，需要修改子组件的 $emit 和文档中的一样使用 this.$emit('update:title', newTitle) 来触发更新
也可以将这个 .sync 修饰符和 v-bind 配合使用，用于修改传入的同一个对象中的多个属性
<text-document v-bind.sync="doc"></text-document>这样会把 doc 对象中的每一个 property (如 title ) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。
二： .prop
.prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定 (差别在哪里？)。
这个的主要就是你需要先理解 DOM property 和 attribute 的 区别（ DOM属性 和 属性 挖个坑找时间聊聊），然后就很容易知道这个修饰符的作用了。
大概就是 v-bind 默认绑定到 DOM 节点的 attribute 上，使用 .prop 修饰符后，会绑定到 property 上
最后一个 .camel
.camel- (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
因为 HTML代码是不区分大小写的，但是有一些标签需要使用驼峰来申明属性，例如文档中的 svg 标签的 viewBox 属性，如果渲染成 viewbox 则会找不到值。
这个真的很少用到，文档还特别说明了 vue-loader 渲染的不会有这个问题：
在使用字符串模板或通过
vue-loader/vueify编译时，无需使用.camel。
在Vue 3.0中的 .sync
今天写Vue遍码风格的时候发现了一个3.0的新规范，就是不推荐使用 v-bind-sync 这一个选项，里边提到了在 3.0 中已经解决了在组件上 v-model 只允许使用一个的问题，所以不推荐继续使用 .sync 了，大概看一下就好，链接添加在了附录内，所以这又是一篇迟到的文章，2333333。