methods watch and compute the difference and contact the Vue

It is computed for the combination of a plurality of basic data into a complex data; while achieving the automatic change notification mechanism provided vue. 
　　Is about to become the basis of data of complex data while gaining automatic change notification mechanism 

watch is the use of an automatic change notification mechanism vue for the spread of this change out (implementation-dependent and computed update logic or do the opposite thing). 
　　Namely the use of automatic change notification mechanism to spread out changes

Share article nice article

table of Contents

text

back to the top

Look at the relationship between methods, watch and computed from the mechanism of action and nature

Image Title [original]: "He is a three wisdom to do with it? "

First thing to say, methods, watch and are computed as a function-based, but they are nothing but their different

From the mechanism of action and the nature point of view, methods, and watch / computed not the same, so I am going to introduce two main contrast:

1. Methods (Watch / computed) and comparison

2. Comparison of computed and watch

The mechanism of action

1. Watch and computed tracking mechanisms are dependent Vue basis , and they are trying to deal with such a thing: when a certain data (called data-dependent) changes, all rely on this data "relevant" data "automatic" changes, related to the function that is automatically invoked to achieve changes in the data.

2. methods: methods which are used to define the function, it is clear that it needs to perform a manual call. Rather than watch and computed as "automatic execution" pre-defined function

[Summary]: methods defined inside a function, is the need to take the initiative to call, and watch and computed and related functions, will automatically call to complete the effect we want to accomplish

By nature

1. Methods which are defined functions , you obviously need something like "fuc ()" so to call it (assuming that function as fuc)

2. computed is computed attribute , and the fact that the data in the data object and attribute (use) the same class,

E.g:

computed:{
    fullName: function () { return  this.firstName + lastName }
}

When you access and use this.fullName to get with it and get the same data (not as a function call !!)

3. Watch : + Event sensing mechanism similar to the mechanism:

E.g:

watch: {
   firstName: function (val) {  this.fullName = val + this.lastName }
}

firstName change this condition is special "event" is triggered, and firstName the corresponding function is equivalent to the method of execution after listening to the event

back to the top

Comparison of computed watch and

Having said that, the following first to watch and computed

First, they are all dependent on tracking mechanisms Vue on the basis of their common: all hope in time-dependent data changes, and is dependent on the data according to pre-defined function, "automatic" changes

Of course, we can write their own code that do all of this, but the wording is likely to cause confusion, the code redundancy situation. Vue provides such a convenient interface for us, the Uniform Rules

But watch and computed also significantly different places:

And computed the relationship between the respective data processing watch different scenarios

1. Watch scene good processing: a plurality of data Data Effect

2. computed tamper scene long process: a plurality of data by data Effects

watch good handling scenario: a plurality of data Data Effect

(Specifically on fancy FIG ok, not repeated here)

For the watch, we start talking about a scene

In "One Piece" which, the name of the protagonist of the team called: "straw hat pirates"

So we put the crew in turn called:

Straw hat pirates Sauron, straw hat pirates Nami, and so on. . .

We hope that: when the boat group name is changed, the names of all crew members on the ship changes together! !

E.g:

One day, Captain Luffy in order to strengthen team building, promote the culture of pirates, decided to "straw hat pirates" was renamed "rubber pirates" (Luffy is rubber devil fruit ability person)

Our code is as follows:

var vm = new Vue({
  el: '#app',
  /*
   data选项中的数据：
   1.haiZeiTuan_Name --> 海贼团名称
   2.船员的名称 = 海贼团名称（草帽海贼团） + 船员名称（例如索隆）
 
   这些数据里存在这种关系：
   （多个）船员名称数据 --> 依赖于 --> （1个)海贼团名称数据
    一个数据变化 --->  多个数据全部变化
  */
  data: {
    haiZeiTuan_Name: '草帽海贼团',
    suoLong: '草帽海贼团索隆',
    naMei: '草帽海贼团娜美',
    xiangJiShi: '草帽海贼团香吉士'
  },
  /*
   在watch中，一旦haiZeiTuan_Name（海贼团名称）发生改变
   data选项中的船员名称全部会自动改变 （suoLong，naMei，xiangJiShi）
   并把它们打印出来
  */
  watch: {
    haiZeiTuan_Name: function (newName) {
      this.suoLong = newName + '索隆'
      this.naMei = newName + '娜美'
      this.xiangJiShi = newName + '香吉士'
      console.log(this.suoLong)
      console.log(this.naMei)
      console.log(this.xiangJiShi)
    }
  }
})
 
// 更改watch选项中监控的主数据
vm.haiZeiTuan_Name = '橡胶海贼团'

demo:

于是船员们的称号前缀都被统一修改了！(原本是“草帽海贼团”)

但是我们的路飞船长又突发奇想：我这么喜欢吃肉，干脆我们叫做“肉肉海贼团”好了吧！

我们把最下面的代码改为：

// 更改watch选项中监控的主数据
vm.haiZeiTuan_Name = '肉肉海贼团'

demo:

computed擅长处理的场景：一个数据受多个数据影响

我们再从一个场景说起

路飞的全名叫做：蒙奇-D-路飞，他想成为海贼王，但路飞的爷爷卡普（海军英雄）因此感到非常恼怒，于是把“路飞”改成了叫“海军王”，希望他能改变志向

代码如下：

var vm = new Vue({
  el: '#app',
  /*
   data选项中的数据：firstName，secName,thirdName
   computed监控的数据：lufei_Name
   两者关系： lufei_Name = firstName + secName + thirdName
   所以等式右边三个数据任一改变，都会直接修改 lufei_Name
  */
  data: {
    // 路飞的全名：蒙奇·D·路飞
    firstName: '蒙奇',
    secName: 'D',
    thirdName: '路飞'
  },
  computed: {
    luFei_Name: function () {
      return this.firstName + this.secName + this.thirdName
    }
  }
})
 
// 将“路飞”改为“海军王”
vm.thirdName = '海军王'
// 打印路飞的全名
console.log(vm.luFei_Name)

demo:

但是：

有一天，路飞的逗逼爷爷卡普，一不小心发现可能把族谱搞错了，实际上，他们不是“D”之一族，而是“H”一族，也就是说，“蒙奇-D-路飞”可能要叫做“蒙奇-H-路飞”了

将最后一段代码改为如下：

// 将“D”改为“H”
vm.secName = 'H'
// 打印路飞的全名
console.log(vm.luFei_Name)

demo：

回到顶部

methods不处理数据逻辑关系，只提供可调用的函数

相比于watch/computed，methods不处理数据逻辑关系，只提供可调用的函数

new Vue({
  el: '#app',
  template: '<div id="app"><p>{{ say() }}</p></div>',
  methods: {
    say: function () {
      return '我要成为海贼王'
    }
  }
})

回到顶部

从功能的互补上看待methods,watch和computed的关系

在很多时候，computed是用来处理你使用watch和methods的时候无法处理，或者是处理起来并不太恰当的情况的

利用computed处理methods存在的重复计算情况

1.methods里面的函数就是一群“ 耿直Boy”，如果有其他父函数调用它，它会每一次都“乖乖”地执行并返回结果，即使这些结果很可能是相同的，是不需要的

2.而computed是一个“ 心机Boy”，它会以Vue提供的依赖追踪系统为基础，只要依赖数据没有发生变化,computed就不会再度进行计算

例子：

new Vue({
  el: '#app',
  // 设置两个button，点击分别调用getMethodsDate,getComputedDate方法
  template: '<div id="app"><button @click="getMethodsDate">methods</button><button @click="getComputedDate">computed</button></div>',
  methods: {
    getMethodsDate: function () {
      alert(new Date())
    },
    // 返回computed选项中设置的计算属性——computedDate
    getComputedDate: function () {
      alert(this.computedDate)
    }
  },
  computed: {
    computedDate: function () {
      return new Date()
    }
  }

第一次点击methods按钮：

第二次点击methods按钮：

注意两次点击methods返回的时间是不同的！！

第一次点击computed按钮：

第二次点击computed按钮：

注意两次点击computed返回的时间是相同的！！

1.两次点击methods返回的时间是不同的

2.注意两次点击computed返回的时间是相同的

【注意】为什么两次点击computed返回的时间是相同的呢？new Date()不是依赖型数据（不是放在data等对象下的实例数据），所以computed只提供了缓存的值，而没有重新计算

只有符合：1.存在依赖型数据 2.依赖型数据发生改变这两个条件,computed才会重新计算。

而methods下的数据，是每次都会进行计算的

利用computed处理watch在特定情况下代码冗余的现象，简化代码

new Vue({
  el: '#app',
  data: {
    fullName: '彭湖湾',
    firstName: '彭',
    secName: '湖',
    thirdName: '湾'
  },
  // watch中的代码显然是同类型，重复的，它并不简洁，也不优雅
  watch: {
    firstName: function (newValue) {
      this.fullName = newValue + this.secName + this.thirdName
      console.log(this.fullName)
    },
    secName: function (newValue) {
      this.fullName = this.firstName + newValue + this.thirdName
      console.log(this.fullName)
    },
    thirdName: function (newValue) {
      this.fullName = this.firstName + this.secName + newValue
      console.log(this.fullName)
    }
  }
})

watch中的代码显然是同类型，重复的，它并不简洁，也不优雅，所以我们可以把它变成这样

new Vue({
  el: '#app',
  data: {
    fullName: '彭湖湾',
    firstName: '彭',
    secName: '湖',
    thirdName: '湾'
  },
  // 对watch中的代码进行重构，实现同样效果
  computed: function () {
    this.fullName = this.firstName + this.secName + this.thirdName
    console.log(this.fullName)
  }
})