例子学习法:vue中的.sync修饰符的具体作用

官方文档:.sync修饰符

看完文档后我还是懵逼,虽然尤大已经写的很清楚了,还是自己比较笨.

接下来来通过一个完整实例学习下.sync修饰符

就拿现实中的列子来说吧.. 假设小红的爸爸有 100000 元, 来通过点击按钮每次花100 元,也就是说每次点击都让爸爸的钱少100.

先来看看第一种不用.sync 修饰符的代码:

爸爸组件代码:

<template>
  <div id="app">
    小红的爸爸现在有 {{ total }} 元
    <hr />
    <MyChild :money="total" v-on:update:money="total = $event"/>
  </div>
</template>

<script>

import MyChild from "./MyChild.vue";
export default {
  data() {
    return {
      total: 100000,
    };
  },
  components: {
    MyChild:MyChild
  },
};
</script>

<style>
#app {
  border: 2px solid red;
  padding: 10px;
}
</style>

小红组件代码:

<template>
    <div class="child"> 
        <span>小红每次花100元</span>
        <button @click="$emit('update:money',money - 100)">花钱</button>
        爸爸还剩下{{money}} 元
    </div>
</template>

<script>
export default {
    props:["money"]
};
</script>

<style lang="scss" scoped>
button{
    margin: 0 10px;
}
</style>

结果如下图，点击一次花钱，减少100元，因为$emit()的第二个参数money - 100 会被赋给$event，所以可以实现子组件更新父组件的数据。

使用.sync

给小红爸爸加入.sync

<template>
  <div id="app">
    小红的爸爸现在有 {{ total }} 元
    <hr />
    <MyChild :money.sync="total"/>
  </div>
</template>

<script>

import MyChild from "./MyChild.vue";
export default {
  data() {
    return {
      total: 100000,
    };
  },
  components: {
    MyChild:MyChild
  },
};
</script>

<style>
#app {
  border: 2px solid red;
  padding: 10px;
}
</style>

小红爸爸的钱同样也可以减少

那我们为啥要用.sync?

因为 <MyChild :money.sync=“total”/> 经过vue内部编译器,变成了 <MyChild :money=“total” v-on:update:money=“total = $event”/>
vue编译器会把小红组件里的 $emit(‘update:money’,money - 100) 的第二个参数,也就是 会把 money - 100 自动的绑定到小红爸爸组件 .sync 修饰符的变量上. [也就是变量 total]

这其实是vue中的语法糖,就跟ES6 中 class 一样. 而我更愿意认为这是尤大设计好的一个隐秘技能,为我们节省了很多的代码,使得代码更容易阅读和保证简洁.

1. 说明一般使用 v-model / .sync 实现，v-model 是 v-bind:value 和 v-on:input 的语法糖

   1. v-bind:value 实现了 data ⇒ UI 的单向绑定
   2. v-on:input 实现了 UI ⇒ data 的单向绑定
   3. 加起来就是双向绑定了

2. 这两个单向绑定是如何实现的呢？

   1. 前者通过 Object.defineProperty API 给 data 创建 getter 和 setter，用于监听 data 的改变，data 一变就会安排改变 UI
   2. 后者通过 template compiler 给 DOM 添加事件监听，DOM input 的值变了就会去修改 data。 文章中可能会有错误,希望看到错误麻烦大佬指正.小弟会虚心学习.