Vue计算属性和侦听器

1. 计算属性

  • 简单点来说就是进行数据操作

  • 代码示例:

data:{
	meassage:"hello"
	},
computed:{
	chagemeassage:function(){
		return this.meassage.split(' ').reverse().join('');	
	} 
}
  • 注意点:computed下的属性不可在data注册声明,不然会报错。上面这个例子可以让chagemessage依赖message的变化,实际是message变化了,相对应了触发了相关的依赖,执行chagemeassage这个函数相对应的代码。页面可以直接引入chagemeassage进行渲染,跟data定义的类似。不同点computed只有getter属性,没有setter属性。故而你可以this.chagemeassge得到这个值不可以this.chagemeassge="88“报错的。如果可以setter,只是通过人为添加set方法,改变chagemeassge相依赖的data,只是间接性。依赖的绑定:chagemeassage这个函数里面必须要用到data定义的值。不然不会触发函数(代研究)。

  • 计算属性的getter函数是没有副作用(side effect)的,这使它更易于测试和理解

  • 计算属性的优势:计算属性应用的是缓存,在相对的data依赖没有发生改变时,调用的是缓存里面的。反而方法调用,到达相对应的效果,要重新调用函数,这样就非常浪费资源。(计算属性和方法的比较)。
    使用场景:一个数据受多个数据影响

2. 侦听器

  • 侦听器,我的理解为在data定义的属性,绑定一个函数。当数据发生变化时,就会触发这个函数。

  • 代码示例:

data:{
	meassage:"hello",
	first:""
},
watch:{
	meassage:function(val ){
	 this.first= val +"dd"
	}
}
  • 注意点:侦听器属性必须要跟data定义的属性名一致才可以实现进行绑定。不然不会触发(不会报错),可以侦听计算属性(没必要)。
  • a、问题:watch监听的数据变化,进行ajax请求。当数据每变化一次就进行ajax,然而我只需要最终的变化值。反复调用函数进行ajax,白白浪费了资源,这不是我们想要的效果。
    解决方案:使用_debounce函数,_.debounce` 是一个通过 Lodash 限制操作频率的函数。 代码示例:
<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>
<script>
var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 `question` 发生改变,这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  },
  created: function () {
    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    // 在这个例子中,我们希望限制访问 yesno.wtf/api 的频率
    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识,
    // 请参考:https://lodash.com/docs#debounce
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
  },
  methods: {
    getAnswer: function () {
      if (this.question.indexOf('?') === -1) {
        this.answer = 'Questions usually contain a question mark. ;-)'
        return
      }
      this.answer = 'Thinking...'
      var vm = this
      axios.get('https://yesno.wtf/api')
        .then(function (response) {
          vm.answer = _.capitalize(response.data.answer)
        })
        .catch(function (error) {
          vm.answer = 'Error! Could not reach the API. ' + error
        })
    }
  }
})
</script>
  • 使用场景:a、一个数据影响多个数据。b、数据变化时执行异步
Logo

前往低代码交流专区

更多推荐