vue中computed（計算屬性）和watch（數據監聽）

1.computed(計算屬性)

　　根據一個現有數據去生成一個新數據，並且這兩個數據會永久的建立關系，還會建立緩存，當無關數據改變的時候，不會重新計算而是直接使用緩存中的值

<div id="app">
    <p>計算屬性fullName:{{fullName}}</p>
</div>

<script>
    var vm = new Vue({  
        el: '#app',  
        data: {  
            firstName: 'Foo',  
            lastName: 'Bar',  
        },  
        computed: {  
            fullName: function () {  
                return this.firstName + ' ' + this.lastName  
            }  
        }  
    })
</script>

需要注意的是，就算在data中沒有直接聲明出要計算的變量，也可以直接在computed中寫入。

　　1.1computed的緩存功能

<div id="app">
    <h1>{{message}}</h1>
    <p class="test1">{{methodTest}}</p>
    <p class="test2-1">{{methodTest()}}</p>
    <p class="test2-2">{{methodTest()}}</p>
    <p class="test2-3">{{methodTest()}}</p>
    <p class="test3-1">{{computedTest}}</p>
    <p class="test3-2">{{computedTest}}</p>
</div>

<!--script部分-->
let vm = new Vue({
    el: '#app',
    data: {
        message: '我是消息，'
    },
    methods: {
        methodTest() {
            return this.message + '現在我用的是methods'
        }
    },
    computed: {
        computedTest() {
            return this.message + '現在我用的是computed'
        }
    }
})

 

 　　methods定義的方法是以函數調用的形式來訪問的，那么test2-1,test2-2,test2-3是反復地將methodTest方法運行了三遍，如果我們碰到一個場景，需要1000個methodTest的返回值，那么毫無疑問，這勢必造成大量的浪費
更恐怖的是，如果你更改了message的值，那么這1000個methodTest方法每一個又會重新計算。。。。

　　computed依賴於data中的數據，只有在它的相關依賴數據發生改變時才會重新求值

　　如上例，在Vue實例化的時候，computed定義computedTest方法會做一次計算，返回一個值，在隨后的代碼編寫中，只要computedTest方法依賴的message數據不發生改變，computedTest方法是不會重新計算的，也就是說test3-1,test3-2是直接拿到了返回值，而非是computedTest方法重新計算的結果。

　　這樣的好處也是顯而易見的，同樣的，如果我們碰到一個場景，需要1000個computedTest的返回值，那么毫無疑問，這相對於methods而言，將大大地節約內存
哪怕你改變了message的值，computedTest也只會計算一次而已

　　1.2get和set用法

 

data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
  fullName：{
   get(){//回調函數 當需要讀取當前屬性值是執行，根據相關數據計算並返回當前屬性的值
      return this.firstName + ' ' + this.lastName
    },
   set(val){//監視當前屬性值的變化，當屬性值發生變化時執行，更新相關的屬性數據
       //val就是fullName的最新屬性值
       console.log(val)
        const names = val.split(' ');
        console.log(names)
        this.firstName = names[0];
        this.lastName = names[1];
   }
   }
  }

2.watch(數據監聽)　　

在vue中，使用watch來響應數據的變化。

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 該回調會在任何被偵聽的對象的 property 改變時被調用，不論其被嵌套多深
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 該回調將會在偵聽開始之后被立即調用
    d: {
      handler: 'someMethod',
      immediate: true
    },
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1