vue的watch,computed和methods里面的方法

来源:http://www.chinese-glasses.com 作者:Web前端 人气:164 发布时间:2020-03-24
摘要:时间: 2019-11-05阅读: 121标签: 属性1.含义及用法 vue的watch和computed到底哪里不同?这个问题在我看文档的时候没有很懂,以至于我就忘记了computed也会触发更新,结果悲剧了。。。吃一堑长

时间: 2019-11-05阅读: 121标签: 属性1.含义及用法

vue的watch和computed到底哪里不同?这个问题在我看文档的时候没有很懂,以至于我就忘记了computed也会触发更新,结果悲剧了。。。吃一堑长一智,补课走起。

(1)在html模版中绑定数据时,如果需要的数据不是一个简单的数据,而是需要将一个或者多个数据计算之后得到的数据,这时候就需要用到计算属性(2)使用方法:配置computed属性,它的值为对象,对象里面的键值对就是一个个计算属性,key就是计算属性的名称,值是一个函数,这个函数的返回值就是计算属性的值

第一步必须是查看文档https://cn.vuejs.org/v2/guide/computed.html

var vm = new Vue({ el: '#app', data: { message: 'good!' }, computed: { reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } }})

div  p原始字符串: {{ message }}/p p反转字符串: {{ reversedMessage }}/p/div

图片 1

渲染结果:

com1.png

div  p原始字符串: good!/p p反转字符串: !doog/p/div

明显上面这句话的含义是模版里面展示的数据如果需要复杂的处理后展示我们应该用计算属性(这个和监听更新并无关系),继续往下看,它给出了一个例子

  1. computed vs methods
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

(1)计算属性一般作为一个数据绑定在html模版中,而methods一般用于事件监听时调用,虽然methods也能达到计算属性一样的效果,但是语义还是有区别的(2)computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。

结果:
Original message: "Hello"
Computed reversed message: "olleH"
然后我们主动修改它的依赖数据message

3.计算属性的get/set方法

vm.message = 'Goodbye'
console.log(vm.reversedMessage)

(1)通常情况下计算属性的值默认是一个函数,即get方法。顾名思义,就是获取一个数据,而这个数据是根据所依赖的数据经过一番计算得到的。(2)其实它还有一个方法,即set方法,通过给这个属性赋值来触发相关的回到函数执行,并在回调函数中操作其他的数据

此时的结果是'eybdooG'。也就是说你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message,因此当 vm.message 发生改变时,所有依赖 vm.reversedMessage 的绑定也会更新。

使用方法:将某个计算属性的值设置为一个对象,然后为其设置get和set两个属性,get方法会返回一个数据,而set方法可以操作其他的数据

然后我们把上面的效果用methods里面的方法去实现一下

var vm = new Vue({ el:'#app', data:{ num:20 }, computed:{ result:{ get:function(){ return this.num * 5; }, set:function(value){ this.num = value / 5; } } }})
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage() }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  methods: {
    reversedMessage () {
      return this.message.split('').reverse().join('')
    }
  }
})

获取计算属性的值就是调用get方法,例如:

结果依然是:
Original message: "Hello"
Computed reversed message: "olleH"

!-- 20 * 5 = 100 --p{{result}}/p

也就是说我们两种方式结果是一样的(请相信每一个实现都会有差异,作者不会无缘无故实现几个没有差异的东西给你),这个时候去看文档吧~

给计算属性赋值是调用set方法,例如:

图片 2

!-- 执行完毕后data中的num = 80 / 5 = 16 --button @click="result=80"点我/button

com3.png

本文由10bet发布于Web前端,转载请注明出处:vue的watch,computed和methods里面的方法

关键词:

最火资讯