zoukankan      html  css  js  c++  java
  • vue-计算属性与侦听器

    今日分享

    当在表达式中涉及复杂的运算的时候就可以用到计算属性——computed

    基本用法:

    <span>{{sum}}</span>
    computed:{
          sum:{
              get:function(){
                 return this.a + this.b 
              },
              set:function(newValue){
                  window.console.log(newValue)
                  console.log('setter')
                  this.a+=10
              }
              
          }
      },

    计算属性默认只有getter,可在必要的时候添加setter(注意:只有在设置fullName值的时候才会触发setter方法

    // ...
    computed: {
      fullName: {
        // getter 用来获取属性值。同时计算生成新的值。
        get: function () {
          return this.firstName + ' ' + this.lastName
        },
        // setter 用来改变传递过来的值,发生改变的时候,同时让数据的内容也发生改变。
        set: function (newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
      }
    }
    <el-button type="danger" @click="fullName = 'bob job'">welcome</el-button>

    计算属性传参:

    由于计算属性无法直接传参,所以需要闭包的形式进行传参

    strsulotionTitle(){
                    return function(value){
                        if(value.length>6){
                            value=value.substring(0,6)+'...'
                        }
                        return value
                    }
                    
                }
    <div>{{
    strsulotionTitle(item.title}}</div>
    
    

    计算属性缓存VS方法

    不同的点在于计算属性是基于它们的响应式依赖进行缓存的。

    只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 a,b还没有发生改变,多次访问 sum计算属性会立即返回之前的计算结果,而不必再次执行函数.

    <template>
      <div class="hello">
            <el-row>
                <el-button type="danger" @click="sum += 1">welcome</el-button>
            </el-row>
            <el-row>
                <span>{{sum}}</span>
            </el-row>
            <el-row>
                <span>{{ add() }} </span>
            </el-row>
        
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      props: {
        msg: String
      },
      data(){
          return{
             a:1,
             b:2,
             sum1:0 
          }
              
      },
      computed:{
          sum:{
              get:function(){
                 return this.a + this.b 
              },
              set:function(newValue){
                  window.console.log(newValue)
                  console.log('setter')
                  this.a+=10
              }
              
          }
      },
      methods:{
          add:function(){
              return this.a +this.b
          }
      }
    }
    </script>

    计算属性vs侦听属性

    当需要在数据变化执行异步或开销较大的操作时,需要使用watch.

    watch的基本用法: 当值发生变化时,watch监听并且执行

    <template>
      <div class="hello">
            <el-row>
                <el-button type="danger" @click="sum += 1">welcome</el-button>
            </el-row>
            <el-row>
                <span>{{sum}}</span>
            </el-row>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      props: {
        msg: String
      },
      data(){
          return{
             a:1,
             b:2,
             sum1:0 
          }
              
      },
      watch:{
          a(newValue,oldValue){
              console.log('a改变了')
          }
      },
      computed:{
          sum:{
              get:function(){
                 return this.a + this.b 
              },
              
          }
      }
    }
    </script>

    这样使用watch时会有存在一个问题:值第一次绑定的时候不会执行监听函数,只有值发生改变的时候才会执行。如果需要在绑定值得时候就触发函数的话,需要handlerimmediate属性。

    watch:{
          a:{
              handler(newValue,oldValue){
              console.log('a改变了')
          },
          immediate:true
          }
      },

    如果需要监听某个对象里面的属性值的变化,需要用到deep属性

    watch:{
          a:{
              handler(newValue,oldValue){
              console.log('a改变了')
          },
          immediate:true,
          deep:true
          }
      },

    但是这样使用会耗费很大的性能,可以简化:

    data(){
          return{
             a:{
                 value:1
             },
             b:2,
             sum1:0 
          }
              
      },
      watch:{
          "a.value":{
              handler(newValue,oldValue){
              console.log('a改变了')
          },
          immediate:true,
          //deep:true
          }
      },
  • 相关阅读:
    强化学习的基本迭代方法
    基于文本描述的事务聚类
    学习强化学习之前需要掌握的3种技能
    其它 华硕 ASAU S4100U 系统安装 win10安装 重装系统 Invalid Partition Table 解决
    数据分析 一些基本的知识
    Python 取样式的内容 合并多个文件的样式 自定义样式
    电商 Python 生成补单公司需要的评论格式3
    SpringBlade 本地图片上传 生成缩略图
    SQL Server 字符串截取
    SpringBlade 本地图片上传
  • 原文地址:https://www.cnblogs.com/peilin-liang/p/11941057.html
Copyright © 2011-2022 走看看