vue笔记之计算属性与监听属性

computed计算属性

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

get用法

<div class="computed_watch">
    <P>我的姓名:{{message}}</P>
    <P>我的姓名:{{reversedMessage}}</P>
</div>



data() {
      return {
        message: 'Hello',
     }
    },

//message改变的时候 reversedMessage的结果也会改变
computed: {
     reversedMessage: function () { 
      return this.message.split('').reverse().join('')
    }
}

set用法

   data() {
      return {
        firstName: 'Foo',
        lastName: 'Bar'
 
      }
    },


    computed: {
      fullName: {
        // getter    改变firstName lastName的时候  fillName会跟着一起改
        get: function () {
          return this.firstName + ' ' + this.lastName
        },
        // setter    改变fillName的时候 firstName   lastName会跟着一起改
        set: function (newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
      }    
      
    },

watch侦听属性

1.简单监听以及深度监听

 <div class="biji">
    <p>{{value}}</p>
    <p>{{first.second}}</p>
    <button @click="change">改变</button>
  </div>

data() {
      return {
        value:'今天也要努力工作呀',
        'first': {
          second: 0
        }
      }
    },

  watch: {
      //简单的监听
      value(oldVal, newVal){
        console.log(oldVal)
        console.log(newVal)
      },
      //深层监听
      first: {
        handler(oldVal, newVal) {
          console.log(oldVal)
          console.log(newVal)
        },
       // immediate: true,   //如果为true的时候第一次进页面触发
        deep: true
      }
    },