watch监听属性和计算属性的区别及用法

一、watch监听属性：

1.无缓存性，页面重新渲染时值不变化也会执行(数据变化，就会直接触发响应的操作)。

2.一对多，一个数据影响多个数据。

3.支持异步操作，监听的函数接收两个参数，第一个参数是最新的值；第二个参数是之前的值。

4.immediate属性： immediate设置为 true 时组件加载立即触发回调函数执行。

5.deep属性: 深度监听，修改对象里面任何一个属性都会触发这个监听器里面的 handler 方法来处理响应的逻辑。

二、computed计算属性

1.支持缓存，只有当依赖项数据发生改变，才会重新进行计算。

2.多对一或者一对一，一个数据受多个数据影响。

3.不支持异步，当computed内有异步操作时无效，无法监听数据的变化，此时计算属性也是无效的。

4.计算属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值。

5.如果计算属性属性值是函数，那么默认会走get方法；函数的返回值就是属性值；计算属性computed需要对数据进行修改，需要写get和set两个方法，当数据变化时，调用set方法。

三、watch的用法（不是需要手动进行调用的，当数据中的任何一个数据发生变化都会自动触发，进行相对应的操作）

1.普通监听,当值第一次绑定的时候不会监听，只有当值改变的时候才会执行监听函数

<input type="text" v-model="Name"/>  
//监听   当Name值发生变化时触发
watch: {
    Name (newName, oldName) {
        console.log("新值{0},输入之前的值{1}",newName,oldName);
    }
}

2. 设置immediate为true，则在第一次绑定值的时候就会执行监听函数

<input type="text" v-model="Name"/>  
watch: {
    Name: {
        handler (newName, oldName) {
            console.log("新值{0},输入之前的值{1}",newName,oldName);
        },
        immediate: true
    }
}

3.当需要监听对象或者数组的时候，需要设置deep为true，进入深度监听

<input type="text" v-model="Name.name" />
data (){
    return {
        Name: {name:'帅哥'}
    }
},
watch: {
    Name: {
        handler(newName, oldName) {
            console.log("新值{0},输入之前的值{1}",newName,oldName);
        },
        immediate: true,
        deep: true
    }
}

四、computed计算属性的用法（因为计算属性是基于缓存实现的，只在计算属性所依赖的数据发生改变时它们才会重新求值，否则访问计算属性会立即返回之前的计算结果，而不必再次执行函数。 相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。性能开销和watch比  较小）

注意：

 计算属性和data属性都是变量并且不能重名，用法和data相同

函数内变量变化, 会自动重新计算结果返回

<template>{{Name}}</template>
<script type="text/javascript">

    const vm = new Vue({
        el: '#id',
        data: {
            a: '张',
            b: '大'
        },
        computed:{
            Name:{
               get(){
                   return this.a+ this.b
               },
               set(value){

               }
            }
        }
    })
</script>

当计算属性只有get时可以简写

<template>{{Name}}</template>
<script type="text/javascript">

    const vm = new Vue({
        el: '#id',
        data: {
            a: '张',
            b: '大'
        },
        computed:{
            Name:function(){
               return this.a+ this.b
            }
        }
    })
</script>