计算属性和监听属性

---

1.计算属性(computed)

1.1计算属性(computed)的定义

在 Vue.js 中，computed 属性用于定义计算属性。计算属性是基于它们的依赖进行缓存的，只有在相关依赖发生变化时才会重新计算。这使得它们非常适合用于处理复杂的逻辑或数据转换，而不需要在模板中直接进行计算。

1.2计算属性的使用

1.2.1不简写方式（手动定义）

代码如下（示例）：

 <div id="root">
    <h2>a的值为:{{a}}</h2>
    <h2>b的值为:{{b}}</h2>
     <button @click="a++">a加1</button>
     <button @click="b++">b加1</button>
     <h2>a+b的值为:{{sum}}</h2>
</div>

<script>
    const vm=new Vue({
        el:'#root',
        data:{
           a:1,
           b:1
        },
        computed:{
            //不简写形式
            sum:{
                get(){
                    //用于返回计算属性的值
                    return this.a+this.b
                },
                set(newValue) {
                    //用于设置计算属性的值
                   console.log('change')
                }
            }
        }
        
    })
    
</script>

当改变sum的值时，就会触发set方法

``
1.2.2简写方式（手动定义）
当计算属性中只有get方法时，就可以进行简写

   //简写方式
            computed:{
                sum(){
                    return this.a+this.b
                }
            }

2.监听属性（watch）

2.1监听属性的定义

用于观察 Vue 实例上的数据变动。当被观察的数据变化时，执行特定的回调函数。
watch可以用来监听data中的数据，也可以监听computed中的属性，但是如果是变量，watch监听不到

2.2监听属性的使用
2.2.1不简写形式
代码如下（示例）：

 watch:{
                //不简写形式
                a:{
                    immediate:true,
                    //当属性的值变化时，handler被调用
                    handler(newValue,oldValue){
                         console.log('change')
                    },
                }
            }

2.2.2深度监视

代码如下（示例）：

   <script>
     const vm = new Vue({
         el: '#root',
         data: {
             a: 1,
             b: 1,
             numbers:{
 				a:1,
 				b:1,
 				c:{
 					d:{
 						e:100
 					}
 				}
 			}
         },
         //简写方式
         computed: {
             sum() {
                 return this.a + this.b
             }
         },
         watch: {
             //不简写形式
             numbers: {
                 immediate: true,
                 deep: true,//开启深度监视
                 //当属性的值变化时，handler被调用
                 handler(newValue, oldValue) {
                     console.log('change')
                 },
             }
         }

     })

 </script>

2.2.3简写

当没有deep和immediate时就可以简写

   a(){
                    console.log('change')
                }
                ```
# 总结