本文主要是介绍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>
3.computed和watch选择
（1）computed和watch如果都能完成某个功能，优先选择computed
（2）有一种情况下，必须使用watch。那就是程序中使用了异步的方式，只能使用watch
4.什么时候用箭头函数什么时候用普通函数
（1）该函数是Vue管理的，用普通函数
（2）不是Vue管理的，用箭头函数
这篇关于Vue2计算属性(computed)和侦听器(watch)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
