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

文章目录

1.计算属性
- 1.1 什么是计算属性
- 1.2 计算属性怎么用？
- 1.3 计算属性的作用
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）如果监视的属性具有多级结构，一定要添加单引号：如：‘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>

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

<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>