计算属性(computed)和侦听器(watch)-阿里云开发者社区

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

2024-07-05 33

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 计算属性(computed)和侦听器(watch)

1.计算属性

1.1 什么是计算属性

（1）Vue的原有属性：data对象当中的属性就可以理解为Vue的原有属性

（2）计算属性：使用Vue的原有属性，经过一系列的运算/计算，最终得到了一个全新的属性，叫做计算属性

1.2 计算属性的作用

（1）代码得到了复用

（2）代码更加便于维护

（3）代码的执行效率高了（可以走缓存）

1.3 vue2 计算属性怎么用？

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

computed ：{
    // 这是一个计算属性
    计算属性1：{   
      // 当读取计算属性1的值的时候，getter方法被调用
      get(){ 
      },
      // 当修改计算属性1的值的时候，setter方法被自动调用
      set(val){
      }
    }
}

补充：get方法的调用时机包括两个

①第一个时机：第一次访问这个属性的时候

②第二个时机：该计算属性所关联的Vue原有属性的值发生变化时，get方法会被重新调用一次

③其他情况会走缓存

（2）代码示例：

<div id="app">
  <h1>{{msg}}</h1>
  输入的信息：<input type="text" v-model="info"><br>
  反转的信息：{{reversedInfo}} <br>
 </div>
 <script>
  const vm =new Vue({
  el: '#app',
  data :{
    msg :'计算属性-反转字符串案例',
    info :''
      },
  computed :{
    reversedInfo:{
      get(){
        console.log('getter 被调用了');
        return this.info.split('').reverse().join('')
        },
      set(val){ // val就是修改计算属性后的值
        console.log('setter 被调用了');
        }
      }
    } } )
</script>

（3）计算属性的简写形式(set方法一般不使用，如果只使用get方法可以使用简写形式)

computed : {
  reversedInfo(){
    console.log('getter 被调用了');
    return this.info.split('').reverse().join('')
  }
}

1.4 vue3 的计算属性怎么用

import {computed} from ‘vue’ //computed 是一个组合式的 API。
setup(){
  // 简写
  let reversedName = computed(()=>{
  // 这是一种简写形式，如果你只需要使用计算属性的get方法的话，可以这样简写
  })
  // 完整写法
  let reversedName = computed({
    get(){
    // 读取计算属性的值的时候执行
    },
    set(value){
    // 当修改计算属性的值的时候执行
    }
  })
}

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>

3.computed和watch选择

（1）computed和watch如果都能完成某个功能，优先选择computed

（2）有一种情况下，必须使用watch。那就是程序中使用了异步的方式，只能使用watch

4.什么时候用箭头函数什么时候用普通函数

（1）该函数是Vue管理的，用普通函数

（2）不是Vue管理的，用箭头函数