Vue中watch、computed和methods的区别

watch和computed是对数据的监听

   new Vue({
            el:'#app',
            template:`
                <div>
                    1.{{msg}}|{{data1}}|{{data2}}
                    <br/>
                    2.{{fullName}}
                    <button @click="changed(123)">点我触发</button>
                </div>

            `,
            watch:{
                msg(value){ // 改变后的值 msg(new,old) 这里一般有两个参数一个是改变后的值就是新值，一个是改变后的值也就是旧值
                    this.data1 = value + this.data1;
                    this.data2 = value + this.data2
                },
                $route(to,from){
					// 顺便一提这个$route也是要监听的数据所以也可以写在watch中监听
				}
            },
            computed:{
                fullName(){
                    return  this.firstName  + " " +this.lastName;
                }
            },
            methods:{
                changed(a){
                    this.msg = 6868 + a;
                    this.firstName = 'wang';
                }
            },
            data(){
                return{
                    msg:123,
                    data1:'wshi1',
                    data2:'wshi2',
                    firstName:"ZHOU",
                    lastName:"wang",
                }
            }
        })

点击前

点击后

watch和computed都是对数据的监听只有数据发生变化时才会触发，但是他们擅长的领域不一样
watch更擅长一对多：就是主要监听一个可以影响多个数据的数据
computed擅长多对一：主要监听多个数据影响一个数据的数据，一定要return
组合出的那个数据会自动定义不用在data中再次定义，
当然也可以使用watch来监听组成computed所监听数据的每一个数据，但是这样代码的重复率过高

methods和watch、computed的区别

这个很直观，methods是通过事件驱动来执行函数的是被动的
watch、computed是当监听的数据发生变化时主动执行这个函数

methods和computed的区别

区别一个是主动与被动，另一个是methods的运算是没有缓存的，computed运算是有缓存的（只要运算所依赖的数据没有发生变化就会从缓存中取出结果）

 new Vue({
            el: '#app',
            // 设置两个button，点击分别调用getMethodsDate,getComputedDate方法
            template: `
            <div id="app">
	            <button @click="getMethodsDate">methods</button>
            	<button @click="getComputedDate">computed</button>
            </div>`,
            methods: {
                getMethodsDate() {
                    alert(new Date())
                },
                // 返回computed选项中设置的计算属性——computedDate
                getComputedDate() {
                    alert(this.computedDate) // 弹出computedDate的内
                }
            },
            computed: {
                computedDate: function () {
                    return new Date()
                }
            }
        })

第一次点击methods

第二次点methods

上面显示的时间是不一样的，它会重新new Date()不一样很正常
第一次点击computed

第二次点击computed

没有变化这是因为这个函数执行时依赖的new Date()在created()生命周期触发的时候就已经创建好了不会再重新new，所以当点击出现两次一样的值