watch侦听属性

1.了解侦听属性

watch侦听属性：可以监听到数据是否发生改变,监听到之后可以进行一些操作,虽然大多数功能计算属性都可以实现,但是像Ajax等异步请求或开销较大的操作，这个方式是最有用的。

监听器的函数里边能够收到两个参数: 更改后的数据和更改前的数据

<div id="app">
    <button @click="value='更改后的数据' ">点击更改数据</button>
    <h1>{
  {value}}</h1>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            value:'原数据',
        },
       watch:{
            value(newVal,oldVal){
                this.value = '最终结果'
                console.log('监听到数据改变了',newVal,oldVal)
            }
       }
    })
  
</script>

2.监听(侦听)数组

当被侦听的是数组,我们需要注意,通过数组索引改变数组数据是侦听不到的

因为Vue实现数据双向绑定,底层是利用Object.definedProperty中的get函数和set函数,而数组中的每项数据,没有对应的getter和setter

所以,如果要侦听数组,则需要使用数组的push,pop,shift,unshift