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

一、单向数据流

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

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

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

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

         
123

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

        v-model的使用：
        
        v-model的原理：
        

（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