vue的computed中的getter和setter

2023-12-13 18:21:05

vue的computed中的getter和setter

定义

computed 中可以分成 getter(读取) 和 setter(设值),一般情况下是没有 setter 的,computed 预设只有 getter,也就是只能读取,不能改变设值。

getter写法

默认只有 getter的写法

<div id="demo">{{ fullName }}</div>
 var vm = new Vue({
   el: '#demo',
   data: {
     firstName: 'Foo',
     lastName: 'Bar'
   },
   computed: {
     fullName: function () {
       return this.firstName + ' ' + this.lastName
     }
   }
 })
 //其实fullName的完整写法应该是如下:
 fullName: {
  get(){
    return this.firstName + ' ' + this.lastName
  }
 }

注意:不是说我们更改了getter里使用的变量,就会触发computed的更新,前提是computed里的值必须要在模板里使用才行。如果将{{fullName}}去掉,get()方法是不会触发的。

setter写法

setter的写法,可以设值

 <template>
    <div id="demo">
        <p> {{ fullName }} </p>
        <input type="text" v-model="fullName">
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
    </div>
 </template>
 
 var vm = new Vue({
   el: '#demo',
   data: {
     firstName: 'zhang',
     lastName: 'san'
   },
   computed: {
     fullName: {
       //getter 方法
      get(){
        console.log('computed getter...')
         return this.firstName + ' ' + this.lastName
        }//setter 方法
     set(newValue){
       console.log('computed setter...')
       var names = newValue.split(' ')
       this.firstName = names[0]
       this.lastName = names[names.length - 1]
       return this.firstName + ' ' + this.lastName
      }
     }
   }
 })

在这里,我们修改fullName的值,就会触发setter,同时也会触发getter。
注意:并不是触发了setter也就会触发getter,他们两个是相互独立的。我们这里修改了fullName会触发getter是因为setter函数里有改变firstName 和 lastName 值的代码,这两个值改变了,fullName依赖于这两个值,所以便会自动改变。

到这里也就结束了,希望对您有所帮助。
在这里插入图片描述

文章来源:https://blog.csdn.net/weixin_71893790/article/details/134975333
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。