computed,watch,methods区别

216 阅读1分钟

computed 计算

  1. 当页面中有某些数据依赖其他数据进行变动的时候,可以使用计算属性。
  2. data中可以没有声明就直接使用,必须使用return返回
<p id="app">  {{fullName}}  </p>
<script>
    var vm = new Vue({  
        el: '#app',  
        data: {  
            firstName: 'Foo',  
            lastName: 'Bar',  
        },  
        computed: { 
            fullName: function () {  
                return this.firstName + ' ' + this.lastName  
            }  
        }  
    })
</script>
  1. 默认只有getter,可自行设置setter
  computed: {
        fullName: {
            // getter
            get: function () {
                return this.firstName + ' ' + this.lastName
            },
            // setter
            set: function (newValue) {
                var nameArr = newValue.split(' ')
                this.firstName = nameArr[0]
                this.lastName = nameArr[nameArr.length - 1]
            }
        }
    }
  1. 具有缓存性,如果依赖的属性没有数据变化,computed会直接从缓存中获取之前计算好的值
  2. 通常一个数据受多个数据影响时使用

watch 监听

  1. 当页面需要监听一个属性变化作出相应逻辑处理时使用。
  2. 监听的属性在data中必须有申明,不是必须要有return返回。
  3. watch为一个对象,键是需要观察的属性,值是对应的回调函数/方法名/包含选项的对象。
var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
        },
        watch: {
            firstName: function (val) {
                this.fullName = val + ' ' + this.lastName
            },
            lastName: function (val) {
                this.fullName = this.firstName + ' ' + val
            }
        }
    })
  1. 不具备缓存性,每次观察都需要重新监听获取
  2. 一般一个数据影响多个数据时使用

methods 方法

  1. 成员是一些事件或者函数,需要条件触发(生命周期、点击等等)。
  2. 主要用于一些复杂的业务逻辑。