计算属性和监听器

计算属性和监听器

计算属性

当我们使用模板进行渲染的时候，也就是使用{{}}双重大括号的时候，我们可能会在模板中使用逻辑运算

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

如果逻辑计算太多，那我们的模板就会难以维护，所以我们要使用计算属性

<div id="example">
  {{ reversedMessage}}//模板中放入计算属性中的函数名称
</div>

//在组件中
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  },

<div id="example">
  {{ reversedMessage()}}//模板中放入计算属性中的函数名称
</div>

//在组件中
  methods: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  },

计算属性是基于响应式依赖进行缓存的，所以只要message不变，计算属性不再执行,当我们使用Date的时候，因为Date.now()不是响应式依赖

//在组件中
  methods: {
    // 计算属性的 getter
    reversedMessage: function () {
      return	Date.now()
    }
  },

侦听属性watch

当我有数据需要随着其他数据变动而变动的时候可以用watch

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
      //侦听firstName，当firstName的值改变的时候，出发函数，参数val是改变了的值，还可以有第二个参数old，也就是之前的值
    firstName: function (val，old) {
        console.log(val)//被改得值
        console.log(old)//Foo这是被改之前的值
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

计算属性的setter

计算属性默认是只有getter的，不过我们可以再提供一个setter

<div id="app">
	{{fullName}}
</div>
data:{
firstName:"王",
lastName:"焱龙"
}
computed: {
  fullName: (){
		return this.firstName+""+this.lastName
  }
}

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]
    }
  }
}

当我们改变fullName的值的时候，就会触发setter，newValue的值是我们得到的新的值。