Vue中的computed属性详解

目录
  • 插值表达式
  • methods
  • computed
  • 总结

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

插值表达式

我们先用插值表达式的方法来实现这一效果

<body>
    <div id="app">
        姓: <input type="text" v-model=firstName> </br>
        </br>
        名: <input type="text" v-model=lastName></br>
        </br>
        姓名： <span>{{firstName}}{{lastName}}</span>
​
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            firstName: '张',
            lastName: '三'
        },
        methods: {
        }
    })
​
</script>

我们可以发现能简单实现我们所需要的效果，但是如果现在我想要添加另外的要求，当我输入的是英文的时候就将首字母大写，这个时候我们只能使用以下方法

<body>
    <div id="app">
        firstName: <input type="text" v-model=firstName> </br>
        </br>
        lastName: <input type="text" v-model=lastName></br>
        </br>
        fullName： <span>{{firstName.replace(firstName[0],firstName[0].toUpperCase())}}   {{lastName.replace(lastName[0],lastName[0].toUpperCase())}}</span>
​
    </div>
</body>
<script type="text/javascript">
    var str = ''
​
    new Vue({
        el: "#app",
        data: {
            firstName: 'joe',
            lastName: 'lili'
        },
        methods: {
        }
    })
</script>

从插值表达式所展现的情况来看虽然能实现想要的效果但是代码显得特别冗长不利于阅读，这个时候想到可以向methods中添加方法来实现这一效果。

methods

向methods添加fullName方法

<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>
​
    </div>
</body>
<script type="text/javascript">
    var str = ''
​
    new Vue({
        el: "#app",
        data: {
            firstName: 'joe',
            lastName: 'lili'
        },
        methods: {
            fullName() {
                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>

我们可以看到通过方法就能很好的解决代码过于冗长的问题。但是又面临了另一个问题，我们在学习vue中的data属性时了解到，只要data中的数据发生变化，页面中用到data数据的地方就会进行更新，所以当data数据firstName与lastName一改变就会重新调用方法fullName,在一定情况下会导致代码效率低，另外，methods中的方法在插值表达式中使用了多少次就会运行多少次。根据以上两种方法的弊端出现了另一种方法，就是使用computed属性。

computed

在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>

在前面我们说过methods中的方法在页面中使用n次便会调用n次，而computed中的属性却不会出现上面的情况。上面代码中我们在页面中使用了同一计算属性3次却只输出了1次结果，同样使用methods中的full方法却输出了3次结果，意味着方法调用了3次。为什么会有这样的结果？这都是因为computed中有缓存机制而methods中并没有。在代码解析到第一个fullName时就会对fullName的结果进行缓存，而到第二个、第三个时会发现缓存中已经有了，那么就不会在对其进行调用。

对computed的使用有了大致的了解后， 我们再来对computed补充一下。

在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
                }
            }

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • Vue3如何理解ref toRef和toRefs的区别

    目录 一.基础 1.ref 2.toRef 3.toRefs 4.最佳的使用方式 二.深入 1.为什么需要ref 2.ref为什么需要.value 3.为什么需要toRef和toRefs Vue3中新增了几种创建响应式数据的方法,其各自的作用当然也不尽相同,每一种方法都有其自己的应用场景,今天我们来聊聊什么是ref toRef和toRefs?三者在使用方式上有什么不同?最佳的使用方式是什么? 一.基础 1.ref (1) 生成值类型的响应式数据, 通过 .value修改值 <template>

  • Vue中ref的用法及演示

    Vue中ref的用法及演示

    目录 ref 定义:被用来给元素或子组件注册引用信息.引用信息会被注册在父组件上的$refs对象上. 如果是在普通的dom元素上使用,引用指向的就是dom元素: 如果用在子组件上,引用指向的就是组件实例. 举例: 组件1: <template> <div> 我是{ {name}} </div> </template> <script> export default { name:'Cpn1', data() { return { name:'组件

  • vue3的ref,computed,reactive和toRefs你都了解吗

    目录 1.ref 2.computed 3.reactive 4.toRefs 总结 在vue2中,data函数里返回的值直接为响应式的,但在vue3中我们需要使用一些函数才能达到这个效果. setup函数中拿不到vue的this 1.ref 本质为一个函数,输入参数为一个值(原始类型),返回响应式的对象 2.computed 本质为一个函数,输入参数是一个函数,可以将我们需要的值作为输入函数的返回值 例子:实现点击按钮,屏幕上的数加1 <template> <div id='app'&

  • Vue 计算属性 computed

    目录 1.基础例子 2.计算属性缓存 vs 方法 3.计算属性的 setter 前言: 一般情况下属性都是放到data中的,但是有些属性可能是需要经过一些逻辑计算后才能得出来,那么我们可以把这类属性变成计算属性. 比如以下: <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑.你必须看一段时间才能意识到,这里是想要显示变量 message

  • setup+ref+reactive实现vue3响应式功能

    setup 是用来写组合式 api ,内部的数据和方法需要通过 return 之后,模板才能使用.在之前 vue2 中,data 返回的数据,可以直接进行双向绑定使用,如果我们把 setup 中数据类型直接双向绑定,发现变量并不能实时响应.接下来就看看setup如何实现data的响应式功能? 一.ref setup 内的自定义属性不具备响应式能力,所以引入了 ref ,ref 底层通过代理,把属性包装值包装成一个 proxy ,proxy 内部是一个对象,使得基础类型的数据具备响应式能力,使用之

  • Vue中的computed属性详解

    Vue中的computed属性详解

    目录 插值表达式 methods computed 总结 今天来说说vue中的计算属性computed,为了更好的理解计算属性的好处,我们先通过一个案例来慢慢 了解计算属性,有如下案例:定义两个输入框以及一个span标签,span标签中的内容为两个输入框中的值,span标签中的内容随着输入框中的内容变化而变化 插值表达式 我们先用插值表达式的方法来实现这一效果 <body> <div id="app"> 姓: <input type="text&

  • VUE 组件的计算属性详解

    VUE 组件的计算属性详解

    目录 前言 计算属性 总结 前言 今天也是元气满满的一天,今天整理一下VUE组件的计算属性!~~ 开始我们的学习之旅 计算属性 先引用一张图 来看一下计算属性之间的关联: 注意: methods和computed里的东西不能重名 method:定义方法,调用方法使用currentTime(),需要带括号 computed:定义计算属性,调用属性使用currenTime2,不需要带括号:this.message是为了能够让currentTime2观察到数据变化 如何在方法中的值发生了变化,则缓存就

  • Vue中provide、inject详解以及使用教程

    目录 Vue中 常见的组件通信方式可分为三类 1. provide / inject 简介 2. provide / inject 使用方法 3. 总结 总结 传送门:Vue中 子组件向父组件传值 及 .sync 修饰符 详解 传送门:Vue中 状态管理器(vuex)详解及应用场景 传送门:Vue中 $ attrs.$ listeners 详解及使用 传送门:Vue中 事件总线(eventBus)详解及使用 传送门:Vue 2.x 官方文档 provide / inject 说明 Vue中 常见

  • Vue中watch使用方法详解

    目录 前言 watch immediate和handler deep 拓展 前言 说到 vue 中的 watch 方法,大家可能首先想到,它是用来监听数据的变化,一旦数据发生变化可以执行一些其他的操作.但是 watch 的操作可不止如此,本章就带大家一起深剖细析 vue 中的 watch 方法. watch 因为 vue 是双向数据绑定,所以当页面数据发生变化时,我们通过 watch 方法就可以拿到数据变化前和变化后的值,从而做一系列操作,下面我们通过一个简单的例子来解释. 先看下面这段代码 <

  • vue中的scope使用详解

    我们都知道vue slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template scope="props"来获取插槽上的属性值,获取到的值是一个对象. 注意:scope="它可以取任意字符串"; 上面已经说了 scope获取到的是一个对象,是什么意思呢?我们先来看一个简单的demo就可以明白了~ 如下模板页面: <!DOCTYPE html> <html> <head> <title>

  • Vue 中mixin 的用法详解

    说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父

  • Vue中$refs的用法详解

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D

  • 使用Vue逐步实现Watch属性详解

    使用Vue逐步实现Watch属性详解

    目录 watch 初始化watch deep.immdediate属性 结语 watch 对于watch的用法,在Vue文档 中有详细描述,它可以让我们观察data中属性的变化.并提供了一个回调函数,可以让用户在属性值变化后做一些事情. watch对象中的value分别支持函数.数组.字符串.对象,较为常用的是函数的方式,当想要观察一个对象以及对象中的每一个属性的变化时,便会用到对象的方式. 下面是官方的一个例子,相信在看完之后就能对watch的几种用法有大概的了解: var vm = new

  • Vue 2.0学习笔记之Vue中的computed属性

    Vue 2.0学习笔记之Vue中的computed属性

    Vue中的 computed 属性称为 计算属性 .在这一节中,我们学习Vue中的计算属性如何使用?记得在学习Vue的模板相关的知识的时候,知道在模板内可以使用表达式,而且模板内的表达式是非常的便利,但这种遍历是有一定的限制的,它们实际上是用于一些简单的运算.也就是说,如果在模板中放入太多的逻辑会让模板过重而且难以维护.咱们先来看一个示例: <div id="app"> <h1>{{ message.split('').reverse().join('') }}

  • 关于vue中 $emit的用法详解

    1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <span @click='select(`大连`)'>大连</span> </div&

随机推荐