Vue单向数据流 和 computed的getter&sette

一、单向数据流

（1）：指只能从一个方向修改数据，即父组件可以向子组件传递数据，但是子组件不能直接修改父组件的状态

（2）Vue是单向数据流，Vue的双向绑定是语法糖

（3）：指在不影响功能的情况下，添加某种方法实现相同的效果，从而方便开发
（使用语法糖可以简化代码书写）

• 例如：v-bind绑定属性简写就是一个冒号

         <p :id="id">123</p>

• 在使用的时候很像双向绑定的，但是 Vue 是单项数据流，v-model 只是语法糖而已

        v-model的使用：
        <input v-model="form" />
        v-model的原理：
        <input v-bind:value="form" v-on:input="form = $event.target.value" />

（4）因为Vue是单向数据流，子组件想修改父组件的值，需要使用$emit通知父组件，让父组件进行修改

二、计算属性computed的&

1、getter&setter

      计算属性computed默认只有getter，不过在需要的时候你也可以提供一个setter，有了setter属性后，就可以通过setter自主地改变计算属性本身的值

2、computed的一般写法

（因为默认只有getter，是默认值，所以也常常忽略不写）

      data() {
        return {
          msg: 123
        };
      },
      computed: {
        newMsg() {
          return this.msg * 2;
        }
      }

3、computed的完整写法

      computed: {
        newMsg: {
          get() {
            return this.msg * 2;
          }
        }
      }

4、getter&setter的使用

• 其执行顺序是setter -> getter

    <template>
      <div id="demo">
        <h3>msg：{{msg}}</h3>
        <h3>newMsg: {{newMsg}}</h3>
        <p>
          输入框：
          <input type="text" v-model="newMsg">
        </p>
      </div>
    </template>

    <script>
    export default {
      data() {
        return {
          msg: "你好"
        };
      },
      computed: {
        newMsg: {
 
       getter：根据原有的属性计算出新的属性（获取数据）
          get() {
            return this.msg;
          },

       setter：当newMsg发生变化时（重新赋值），触发set方法，得到修改后的值通过value传入
          set(value) {
            this.msg = value;   当原有属性发生变化时，触发get方法，然后渲染到页面
          }
        }
      }
    };
    </script>