Vue计算属性和侦听器

最新推荐文章于 2024-09-16 08:47:17 发布

甲鱼勒的司

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量137

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_44737120/article/details/103707419

版权

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>