Vue2计算属性(computed)和侦听器(watch)

yqd666

已于 2024-06-10 12:03:29 修改

阅读量947

点赞数 18

文章标签： vue.js 前端 javascript

于 2024-06-09 18:42:25 首次发布

本文链接：https://blog.csdn.net/y516369/article/details/139562642

版权

文章目录

1.计算属性
2.侦听器(watch)
3.computed和watch选择
4.什么时候用箭头函数什么时候用普通函数

1.计算属性

1.1 什么是计算属性

（1）Vue的原有属性：data对象当中的属性就可以理解为Vue的原有属性
（2）计算属性：使用Vue的原有属性，经过一系列的运算/计算，最终得到了一个全新的属性，叫做计算属性

1.2 计算属性怎么用？

（1）语法格式：vue对象中需要一个新的配置项computed

computed ：{
		// 这是一个计算属性
		计算属性1：{
			// get方法的调用时机包括两个
			// 第一个时机：第一次访问这个属性的时候
			// 第二个时机：该计算属性所关联的Vue原有属性的值发生变化时，get方法会被重新调用一次
			// 其他情况会走缓存
 			get(){
			},
			// 当修改计算属性1的值的时候，setter方法被自动调用
			set(val){
			}
	  }
}

1.3 计算属性的作用

（1）代码得到了复用
（2）代码更加便于维护
（3）代码的执行效率高了（可以走缓存）

2.侦听器(watch)

（1）watch可以监视多个属性，监视哪个属性，就把这个属性的名字拿过来即可，可以监视vue的原有属性

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        数字：<input type="text" v-model="number">
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: '侦听属性的变化',
                number: 0
            },
            computed: {
                hehe() {
                    return 'haha' + this.number;
                }
            },
            watch: {
                number: {
                    //初始化的时候，调用一次handler方法,默认是false
                    // immediate:true,
                    // 这里有一个固定的写法，方法名必须叫做：handler
                    // 当被监视的属性发生变化的时候，handler就会自动调用一次
                    // handler方法上有两个参数：
                    // 第一个参数newValue(属性值改变之后的新值),第二个参数是oldValue(属性值改变之后的旧值)
                    handler(newValue, oldValue) {
                        console.log(newValue, oldValue)
                    }
                }
                ,
                // 也可以监视计算属性
                hehe: {
                    handler(a, b) {
                        console.log(a, b)
                    }
                }
            }
        })
    </script>
</body>

（2）immediate：表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler

 watch: {
 	number: {               
		immediate:true,  
		handler(newValue, oldValue) {
			console.log(newValue, oldValue)
	}
}

（3）如果监视的属性具有多级结构，一定要添加单引号：如：‘a.b’

<body>
    <div id="app">
        数字：<input type="text" v-model="a.b">
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                a: {
                    b: 0
                }
            },
            watch: {
                'a.b': {
                    handler(newValue, oldValue) {
                        console.log(newValue, oldValue)
                    }
                }
            }
        })
    </script>
</body>

（4）如果监视的属性具有多级结构，也可以开启深度监视，默认是关闭的

<body>
    <div id="app">
        数字：<input type="text" v-model="a.b">
    </div>
    <script>
        const vm = new Vue({
            el: '#app',

            data: {
                a: {
                    b: 0
                }
            },

            watch: {
                a: {
                    // 启用深度监视，默认是关闭的
                    deep: true,
                    handler(newValue, oldValue) {
                        console.log('@')
                    }
                }
            }
        })
    </script>
</body>