亲宝软件园·资讯

展开

Vue中监视属性和计算属性区别解析

澜璨 人气:0

计算属性

顾名思义,计算属性就是计算出来的属性,英文名儿computed
这里要和data和methods里的东西区分,data里的属性,methods里的函数,你写的都会原封不动放到vm里,但是computed里面的东西写的是对象,最后放到vm里的是这个对象的名,值是get里的返回值。

下面看下Vue中监视属性和计算属性区别。

需求

我们将计算属性的案例使用watch写一遍

需求一揽

使用watch实现

自实现

data:{
 // 全名
 fullname:{
    full:""
    name:""
},
userName:""
},

准备工作

html

<!-- 创建一个容器 -->
    <form class="app">
        <input type="button" value="重置" @click="reset">
        <!-- 差值语法 == v-model -->
        <div class="box" >
            <div class="title">深度监视</div>
            请输入:<input type="text" v-model="fullName.full"><br>
            请输入:<input type="text" v-model="fullName.name">
            <!-- 使用深度监视 -->
            <div class="content">{{userName}}</div>
        </div>
    </form>

js

<script>
    var vm = new Vue({
      el: '.app',
      data: {
        // 全名
        fullName:{
            full:"",
            name:""
        },
        userName:""
      },
      methods:{
        // 清除fullName的值
        reset(){
            this.fullName.full = ""
            this.fullName.name = ""
        }
      },
      // 对fullName进行监视
      watch:{
        fullName:{
            deep:true,
            handler(){ 
                this.userName = this.fullName.full + "-" + this.fullName.name
            }
        }
      }
      
    });
</script>
this.userName = this.fullName.full + "-" + this.fullName.name

测试

新需求

// 对fullName进行监视
      watch:{
        'fullName.full':{
            handler(newValue){
                // 新增一个定时器
                setTimeout(()=>{
                    this.userName = newValue + "-" + this.fullName.name
                },1000)
            }
        },
        'fullName.name':{
            handler(newValue){
                this.userName = this.fullName.full + "-" + newValue;
            }
        }
      }

注意点

测试

在computed当中书写

是不能够通过异步请求来去维护数据的

//配置计算属性
computed:{
    //完整写法
    /* fullname:{...
    // 简写形式
    /*fullName:funaction(){...
    fullName(){
      return this.full + "-" + this.name
  }
}

// 对fullName进行监视
watch:{
 fullName:{
     deep:true,
     handler(){
          this.userName = this.fullName.full + "-" +this.fullName.name
	  }
	 }
}

总结

computed与watch配置项

加载全部内容

相关教程
猜你喜欢
用户评论