Vue中的computed属性详解 附有源码-前端-阿习进阶博客
Java
MySQL
大数据
Python
前端
黑科技
    首页 >> 互联网 >> 前端

Vue中的computed属性详解 附有源码

[导读]:computed是vue的计算属性,是根据依赖关系进行缓存的计算,只有在它的相关依赖发生改变时才会进行更新今天来说说vue中的计算属性computed,为了更好的理解计算属性的好处,我们先通过一个案例来慢慢 了解计算属性,有如下案例:定义两个输入框以及一个span标签,span标签中的内容为两个输入框中的值,span标签中的内容...

 computed是vue的计算属性,是根据依赖关系进行缓存的计算,只有在它的相关依赖发生改变时才会进行更新

今天来说说vue中的计算属性computed,为了更好的理解计算属性的好处,我们先通过一个案例来慢慢 了解计算属性,有如下案例:定义两个输入框以及一个span标签,span标签中的内容为两个输入框中的值,span标签中的内容随着输入框中的内容变化而变化

在computed中可以定义一些属性:计算属性。计算属性的本质其实就是一个方法,只不过在使用的时候可以直接当做属性来使用。具体有以下特点

  • 计算属性在使用时不需要加(),直接写名称即可

  • 如果计算属性用到了data中的数据,当data数据发生变化时,就会立即重新计算这个计算属性的值

  • 计算属性在第一次使用时的结果会被缓存起来,直到属性中所依赖的data数据发生改变计算属性的结果才会重新求值

<body>
    <div id="app">
        firstName: <input type="text" v-model=firstName> </br>
        </br>
        lastName: <input type="text" v-model=lastName></br>
        </br>
        fullName: <span>{{fullName}}</span></br>
        </br>
        fullName: <span>{{fullName}}</span></br>
        </br>
        fullName: <span>{{fullName}}</span>
    </div>
</body>
<script type="text/javascript">
    var str = ''
    new Vue({
        el: "#app",
        data: {
            firstName: 'joe',
            lastName: 'lili'
        },
        computed: {
            //get的作用?当读取fullName时,get就会被调用,且返回值就是fullName的值
            //get什么时候被调用?1.当第一次读取fullName时。2.当所依赖的data数据发生变化时
            fullName: {
                get() {
                    console.log('hi,我调用了computed')
                  let a = '';
                let b = '';
                if (this.firstName.length != 0)
                    a = this.firstName.replace(this.firstName[0], this.firstName[0].toUpperCase())
                if (this.lastName.length != 0)
                    b = this.lastName.replace(this.lastName[0], this.lastName[0].toUpperCase())
                return a + ' ' + b
                }
            }
        }
    })
</script>
</html>

image.png

在computed我们可以通过给计算属性添加set方法达到赋值效果

<body>
    <div id="app">
        firstName: <input type="text" v-model=firstName> </br>
        </br>
        lastName: <input type="text" v-model=lastName></br>
        </br>
        fullName: <span>{{fullName}}</span></br>
        </br>
    </div>
</body>
<script type="text/javascript">
    var str = ''
    var app = new Vue({
        el: "#app",
        data: {
            firstName: 'joe',
            lastName: 'lili'
        },
        computed: {
            //get的作用?当读取fullName时,get就会被调用,且返回值就是fullName的值
            //get什么时候被调用?1.当第一次读取fullName时。2.当所依赖的data数据发生变化时
            fullName: {
                get() {
                    console.log(this)
                    return this.firstName + this.lastName
                },
                set(val) {
                    this.firstName = val[0]
                    this.lastName = val[1]
                }
            }
        }
    })
</script>

我们可以看到当在控制台对fullName赋值时firstName以及lastName都会改变

如果计算属性中只有get没有set的话可以直接像下面代码这样写

computed: {
  fullName(){
  console.log(this)
  return this.firstName + this.lastName
 }
}


本文来自阿习进阶博客,如若转载,请注明出处:https://yanxias.com

留言区

联系人:
手   机:
内   容:
验证码:

历史留言

联系人:阿习

手机号:156****7890

留言内容:欢迎大家一起讨论文章,有喜欢发帖的可以私聊我给你开权限,发文章

留言时间:2022-05-09 17:46:15

回复内容:互联网阿习

回复时间:2022-05-09 17:46:15

用户IP:220.***.***.232

用户操作系统:Windows 10

欢迎加Easy的QQ