阅读 77

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,所以当点击出现两次一样的值

文章分类
前端
文章标签