vue中侦听器computed、watch、method的使用区别和使用场景

属性在vue中的查找顺序：data>methods>watch>computed

方法	使用场景	是否具有缓存机制	缺点
methods	写逻辑，触发事件，函数封装	无	只要data中有属性发生变化重新渲染视图，方法就会重新执行一次，使用watch来监听单个元素的更新
watch	当某个属性发生改变时，需要做某些事情的时候	有	同一个结果，监听多个元素的时候，冗余
computed	根据data中属性值计算得到新的值时，必须return	有	一个结果有多个属性决定，当依赖属性发生变化的时候，才执行

区别：
1.有无缓存机制：
method:当页面重新渲染的时候method中的方法会重新执行，无缓存机制。
watch和computed:只有涉及watch和computed的方法中的依赖属性（即使用到的属性）变化时，才会执行，如果不涉及，该属性的值仍然是之前留在缓存中的值，具有缓存机制。
2.computed:一般用于计算某属性值，由其他属性发生变化而变化，最后得出该属性的值。
watch:主要用于监听当某个属性值发生变化时，会引起得其他操作。
在computed中默认会有get和set的方法，我们可以监听一个没有在data中的变量，当给这个变量赋值的时候，我们就会走set的方法，调用时走get的方法；

在这里插入代码片
<div id="root">
	{{info}}
</div>
<script>
	var vm = new Vue({
		el:'#root',
		data:{
			age:'23',
			name:'zzh'
		},
		computed:{
			info:{
				set:function(value){
					var arr = value.split(" ");
					this.age = arr[0];
					this.name = arr[1];
				},
				get:function(){
					return "my name is" + this.name+",i am" + this.age+"years old";
				}
			}
		}
	});
</script>
//以下都是控制台上的操作，给info赋值
vm.info = "23zzh";//走set函数，为其他两个变量赋值，页面要输出info，则走get函数;
console.log(info);// my name is zzh, i am 23 years old

watch中监听对象中的属性时候，直接监听不能获取到，需要开启深度监听deep:true，然后在handler中处理value和oldValue

computed使用场景二（做模糊查询） ：

<div>
        <input type="text" v-model="mytext" />
        <ul>
            <li v-for="data in list" :key="data">
                {{data}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#box',
            data: {
                datalist: ["aaa", "bbb", "ccc", "ddd", "add", "cee", "eee"],
                mytext: ''
            },
            computed: {
                list() {
                    //indexOf返回存在字符串得下标，不存在返回-1,str.IndexOf("")空字符串返回0
                    //每次mytext输入的内容变化的时候，都会触发计算，返回过滤后的数组，filter不会改变原数组
                    return this.datalist.filter(item => item.indexOf(this.mytext) > -1);
                }
            },
        });
    </script>