导航：首页 > 开发技术 >

如何理解Vue中的计算属性和属性侦听

发表于：2025-02-01 作者：千家信息网编辑

千家信息网最后更新 2025年02月01日，这篇文章主要讲解了"如何理解Vue中的计算属性和属性侦听"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"如何理解Vue中的计算属性和属性侦听"吧！目录1

千家信息网最后更新 2025年02月01日如何理解Vue中的计算属性和属性侦听

这篇文章主要讲解了"如何理解Vue中的计算属性和属性侦听"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"如何理解Vue中的计算属性和属性侦听"吧！

1. 计算属性

定义

计算属性：要用的属性不存在，要通过已有属性计算得来，计算属性要有一个全新的配置项computed
对Vue来说，data里面的数据就是属性，只要Vue中的数据改变，就会重新解析模板，遇到插值语法里的方法会重新调用

原理

底层借助了Objcet.defineproperty方法提供的getter和setter。

get函数什么时候执行？

初次读取时会执行一次。
当依赖的数据发生改变时会被再次调用。

优势

与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

备注

计算属性最终会出现在vm(Vue实例)上，直接读取使用即可。
如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

语法: 1.简写方式:

 computed: {     "计算属性名" () {         return "值"     } }

需求: 求2个数的和显示到页面上

语法: 2.完整写法:

计算属性写成配置对象的格式:对象中用get和set函数

get的作用: 当有人读取fullName时，get就会被调用，且返回值就作为计算属性的值 (get一定要写return)

get什么时候调用？ 1.初次读取fullName时。 2.所依赖的数据发生变化时。

 get(){                console.log('get被调用了')                // console.log(this) //  此处的this是vm(Vue实例)                return this.firstName + '-' + this.lastName            },

set:当计算属性的值被修改时被调用形参接收的是传入的新值

  ...  computed:{      fullName:{          //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值          //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。          get(){              console.log('get被调用了')              // console.log(this) //此处的this是vm              return this.firstName + '-' + this.lastName          },          //set什么时候调用? 当fullName被修改时。          set(value){              console.log('set',value)              const arr = value.split('-')              this.firstName = arr[0]              this.lastName = arr[1]          }      }  }})

2. 监视（侦听）属性

1. 监视属性watch：

当被监视的属性变化时, handler回调函数自动调用, 进行相关操作

监视的属性必须存在，才能进行监视！！

  ...      // 写法1. 传入watch配置 侦听ishot属性            watch:{          isHot:{              immediate:true, //初始化时让handler调用一下                            //handler什么时候调用？当isHot发生改变时。                            handler(newValue,oldValue){                  console.log('isHot被修改了',newValue,oldValue)              }          }      }  })      // 写法2. 通过vm.$watch监视vm.$watch('isHot',{   immediate:true, //初始化时让handler调用一下，默认是false   //handler什么时候调用？当isHot发生改变时。   handler(newValue,oldValue){ // 有两个参数，一个是新值，一个是旧值         console.log('isHot被修改了',newValue,oldValue)   }})

2. 深度监视

深度监视：

1）Vue中的watch默认不监测对象内部值的改变（一层）。
2）配置deep:true可以监测对象内部值改变（多层）。

备注：

1）Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
2）使用watch时根据数据的具体结构，决定是否采用深度监视。

data:{        isHot:true,        numbers:{                a:1,                b:1        }},watch:{        // 监视多级结构中某个属性的变化（原始写法是要加引号的，简写可以不加，但这种情况要加，否则报错）        /* 'numbers.a':{                handler(){                        console.log('a被改变了')                }        } */        //监视多级结构中所有属性的变化        numbers:{                deep:true, // 如果不开启这个，那监测的就是numbers的地址是否有变化                handler(){                        console.log('numbers改变了')                }        }}

监视属性-简写

当监视属性中只有handler()而不需要开启其他配置项时才能简写

watch:{        isHot(newValue,oldValue){                console.log('isHot被修改了',newValue,oldValue,this)        }}/* vm.$watch('isHot',function (newValue,oldValue) {        console.log('isHot被修改了',newValue,oldValue,this)}) */

3. 区别和原则

computed和watch之间的区别

computed能完成的功能，watch都可以完成。
watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

两个重要的小原则

所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。
所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或组件实例对象。

watch:{        firstName(val){                setTimeout(()=>{                        console.log(this) //vue实例对象，若用普通函数则返回Window                        this.fullName = val + '-' + this.lastName                },1000);        },        lastName(val){                this.fullName = this.firstName + '-' + val        }}

感谢各位的阅读，以上就是"如何理解Vue中的计算属性和属性侦听"的内容了，经过本文的学习后，相信大家对如何理解Vue中的计算属性和属性侦听这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！

很赞哦！