vue学习之路（七）：watch监听和computed计算属性

vue的watch监听

watch监听：在vue中，使用watch来响应数据的变化。watch监听分为浅监听和深监听。

**浅监听：**监听是简单的数据类型：数字，布尔值，字符串，普通数组

语法格式：
	设有两个参数，一个是新的数据，一个是旧的数据
	watch:{
		//写法1
		被监听的变量名称:function ( newVal , oldVal ) {
			执行的程序
		},
		//写法2
		被监听的变量名称 ( newVal , oldVal ) {
    		执行的程序
    	}
    }

<div id="app"> 
        <!-- 点击按钮时，在数据包中追加一条数据 -->
        <button @click="handleAdd">浅监听演示</button>
        <p v-for="(item,index) in stu">
            姓名：{{item.name}},
            分数：{{item.score}}
        </p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                stu:[
                {name:'张三丰',score:100},
                {name:'张无忌',score:80},
                {name:'张翠山',score:60},
                ],
            },
            watch: {
                stu() {
                    // 监听到数据发生变化时弹出提示框
                    window.alert('浅监听到数据数组内容发生变化')
                }
            },
            methods: {
                handleAdd() {
                    this.stu.push({name:'李四',score:70})
                }
	</script>

运行结果：

深监听：浅监听只适合监听一层，如果想监听对象或者数组内部的值，就不适合，这个时候需要深度监听。深度监听可以监听到对象的变化，还可以是复杂数组。需要设置deep属性，默认值是false。

语法格式：
	设有两个参数，一个是新的数据，一个是旧的数据
	watch:{
		// handler是固定的配置选项，不能改变它的名称。表示监听到数据发生变化后执行的函数方法
        handler(){
        	console.log('msg改变了...')
        },
        //显式的改为true，表示要进行深度监听
        deep:true
    }

	<div id="app"> 
        <button @click="handleEdit">深监听演示</button>
        <p v-for="(item,index) in stu">
            姓名：{{item.name}},
            分数：{{item.score}}
        </p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                stu:[
                {name:'张三丰',score:100},
                {name:'张无忌',score:80},
                {name:'张翠山',score:60},
                ],
            },
            watch:{
                // 深监听,可以监听对象里面的值的变化
                stu:{
                   handler(){
                      console.log('深监听，数据包stu数组中的对象发生了变化');
                    },
                   deep:true
                 }
            },
            methods: {
                handleEdit(){
                    this.stu[0].name = '张三';
                }
            },
        })
        </script>

运行结果：

watch和computed的区别：

1. watch中的函数是不需要调用的 ；
   computed内部的函数调用的时候不需要加()

2. watch：监听属性的变化；
   computed:通过属性计算而得来的属性

3. watch：需要在数据变化时执行异步或开销较大的操作时使用；
   computed：任何复杂逻辑或一个数据属性在它所依赖的属性发生变化时也要发生变化，这种情况下最好使用计算属性。

4. computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，主要当作属性来使用。
   当computed中的函数所依赖的属性如果没有发生改变的时候，那么调用当前函数的时候结果会从缓存中读取。
   computed中的函数必须用return返回最终的结果。

如果忘记了computed计算属性，可以看vue学习路(三)：computed计算属性，字符串翻转+成绩筛选这篇文章回顾一下。