【CSDN软件工程师能力认证学习精选】vue中的监听属性和计算属性

CSDN软件工程师能力认证（以下简称C系列认证）是由中国软件开发者网CSDN制定并推出的一个能力认证标准。C系列认证历经近一年的实际线下调研、考察、迭代、测试，并梳理出软件工程师开发过程中所需的各项技术技能，结合企业招聘需求和人才应聘痛点，基于公开、透明、公正的原则，甑别人才时确保真实业务场景、全部上机实操、所有过程留痕、存档不可篡改。

我们每天将都会精选CSDN站内技术文章供大家学习，帮助大家系统化学习IT技术。

计算属性（computed）

• vue中的计算属性是非常棒的东西，它兼具了逻辑和变量。可以让我们不再关注视图层，值关注代码的逻辑即可。至于数据如何展现则只需由Vue负责，不需要我们的参与。
• 所以如果在面临选择是使用计算属性还是监视属性的情况下，优先选择计算属性

        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

export default {
        data(){
            return { 
                message: 'Hello',
            }
        },
        computed: {
            reversedMessage: function () {
                return this.message.split('').reverse().join('');
            }
        }

可以看到我们使用的计算属性替代了模板内表达式的功能。所以，对于任何复杂逻辑，你都应当使用计算属性。而且计算属性让我们只关注于逻辑实现，至于后期的数据在界面上的表示形式则直接由Vue.js负责，读者可以看到我们并没有直接参与页面展示上面来
此外，传统的直接通过表达式求值的方式需要我们自行取值，而计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。也就是说，计算属性会直接从缓存拿值，并伴随着值的改变而改变。而传统的直接通过表达式求值的方式需要我们在拿值之前需要执行一次getter()函数

监听属性（watch）

监听属性其实质是一次异步回调，希望读者在想到使用监听属性之前多考虑能否采用计算属性来取代监听属性
对比同一个功能实现

//计算属性
computed: {
        fullName2: function () {
              return this.firstName + ' ' + this.lastName
        }
}
//监听属性
watch: {
         firstName: function (val) {
               this.fullName = val + ' ' + this.lastName
        },
        lastName: function (val) {
               this.fullName = this.firstName + ' ' + val
       }
} 

可以看到计算属性的代码更加简洁也更加高效，而且就实现效果而言，明显计算属性会更好一点

 

关于CSDN软件工程师能力认证

      CSDN软件工程师能力认证（以下简称C系列认证）是由中国软件开发者网CSDN制定并推出的一个能力认证标准。C系列认证历经近一年的实际线下调研、考察、迭代、测试，并梳理出软件工程师开发过程中所需的各项技术技能，结合企业招聘需求和人才应聘痛点，基于公开、透明、公正的原则，甑别人才时确保真实业务场景、全部上机实操、所有过程留痕、存档不可篡改。C系列认证的宗旨是让一流的技术人才凭真才实学进大厂拿高薪，同时为企业节约大量招聘与培养成本，使命是提升高校大学生的技术能力，为行业提供人才储备，为国家数字化战略贡献力量。

 

了解详情可点击：CSDN软件工程师能力认证介绍

 

转自 https://www.jianshu.com/p/ad94c6e438f7
作者：雪域狼王jayh