watch和computed

watch

watch主要是侦听data里面数据的变化 ，具体是对data里面属性名的监听，因为watch是依赖data的数据的，当数据发生变化的时候就会触发watch里的函数

  var vm = new Vue({
            el: '#app',
            data: {
                firstname: '',
                lastname: '',
                c:{
					b:2
				}
            },
            watch: {
                firstname(val, oldval) {
                    if (val == !oldval) {
                        console.log(111);              
                    }
                },
                c(val,oldval){
					if(this.c.b==2){
						console.log('yes')
					}
					deep:true//监听引用数据类型
				}
            }
        })
})

只有当监听到data里面firstname的变化才会执行的回掉。
注意点

1. watch中的函数是不需要调用的，当数据变化就会自动执行回掉函数
2. watch只是监听数据的地址是否发生变化，也就是当data中的数据是引用数据类型时，data是监听不到的，watch只是监听到第一层，此时需要添加deep：true
3. watch中只要所依赖的数据变化了就会执行回掉，而不像computed会缓存数据

computed

computed计算属性主要用于对复杂逻辑的计算，从而对模板进行简化

<div id="app">
        <input type="text" v-model="firstname"><br/>
        <input type="text" v-model="lastname">
        <div>{{name}}</div>
</div>
<script>
 var vm = new Vue({
            el: '#app',
            data: {
                firstname: '',
                lastname: ''
            },
            computed: {
                name() {
                    return `${this.firstname}${this.lastname}`
                }
            }
   })
 <script/>

只有当所依赖的数据发生变化的时候才会带哦用函数
注意点

1. computed是用来计算复杂逻辑运算的，并且在函数调用的时候不需要加()，直接写函数名即可
2. 在computed内部的函数是必须要有返回值的
3. 当所依赖的数据没有发生变化的时候，computed内部是不会再去调用函数的，而是会去缓存中查找上次缓存的结果
4. 在computed中不要对data中的属性进行赋值操作。如果对data中的属性进行赋值操作了，就是data中的属性发生改变，从而触发computed中的函数，形成死循环了。

总结

• computed是用来对数据进行操作计算处理的，返回的是处理过后的数据，而watch侧重点是对数据的变化侦测，以及执行对应的回掉函数
• watch是不会缓存的，无论数据是否变化，都会触发的函数。而computed当所依赖的数据没有变化，就不会触发函数，会在缓存中查找
• computed是必要有return，而watch不是必须的