• computed(计算属性)和watch(监听属性)的区别


    computed:

      1. computed 具有缓存功能,可以监听对象某个具体属性。

      2.变量不在 data中定义,而是定义在computed中。

      3.根据一个现有数据去生成一个新数据,并且这两个数据会永久的建立关系,还会建立缓存,当无关数据改变的时候,不会重新计算而是直接使用缓存中的值。

      而methods中每调用一次就会重新计算一次,为了进行不必要的资源消耗,选择用计算属性.
     4. 初始化的时候就可以被监听到并且计算


    <template>
      <div>
        <h2>{{isMan}}</h2>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          form: {
            baseInfo: {
              area: '面积',
              streetTown: '地区'
            }
          }
        }
      },
      //根据一个现有数据去生成一个新数据,并且这两个数据会永久的建立关系,还会建立缓存,当无关数据改变的时候,不会重新计算而是直接使用缓存中的值。
      而methods中每调用一次就会重新计算一次,为了进行不必要的资源消耗,选择用计算属性
    computed: { isMan () { return this.form.baseInfo.area && this.form .baseInfo.streetTown } } } </script> <style> </style>

      

    watch:

      1.watch 监听的是已经在 data 中定义的变量, 当该变量变化时,会触发 watch 中的方法

      2.watcher,当需要在数据变化时执行异步或开销较大的操作时,这时watch是非常有用的

      3.watch可以进行深度监听,监听对象的变化。

      4.只能监听简单数据类型,如果监听复杂数据类型,如对象,无法监听对象具体某个属性。

      

    //Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动,触发相应的方法,比如
    
    data() {
           return {
                    queryData: { 
                 name: '',
                 creator: '',
                 selectedStatus: '', 
                time: [], },         
        }        
    }
    // 现在我需要监听这个queryData,我可以这样做:
    watch: {
         queryData: { 
            handler: function() { 
              //do something 
            },
            deep: true 
         } 
    }
    

      

    // 里面的deep设为了true,这样的话,如果修改了这个queryData中的任何一个属性,都会执行handler这个方法。不过其实这样开销是蛮大的,尤其是对象里面结构嵌套过深的时候。
    而且有时候我们就想关心这个对象中的某个属性,比如name,这个时候可以这样
    watch: { 
      'queryData.name': { 
        handler: function() { 
          //do something 
        }, 
        deep: true 
      } 
    }
    

      

    // 或者还可以这样巧用计算属性
    computed: { 
      getName: function() { 
        return this.queryData.name
       } 
    } 
    watch: { 
      getName: { 
        handler: function() { 
          //do something 
        }, 
      } 
    }
    

      

  • 相关阅读:
    jquery validate 自定义验证方法 日期验证
    转:前端控制器是邪恶的么?
    eclipse打开文件位置Open Explorer 插件
    Eclipse标准版安装J2EE
    短网址生成思路算法
    smarty模板执行原理
    Smarty 变量使用
    Php模板引擎Smarty安装和配置
    转:PHP分页技术的代码和示例
    黑板架构模式及其常见实现方式
  • 原文地址:https://www.cnblogs.com/ahalvxiaobu/p/13755244.html
Copyright © 2020-2023  润新知