vue.js 中 data, prop, computed, method，watch 介绍

vue.js 中 data, prop, computed, method，watch 介绍

data, prop, computed, method 的区别

类型	加载顺序	加载时间	写法	做用	备注
prop	1	beforeCreated, created之间	对象或数组	接收父组件传递的值
data	3	同↑	对象或函数	定义以及初始化数据	最好是用于视图上展现的数据，不然最好定义在外面或者vm对象内（减小开支，提升性能）；组件内只接受函数
computed	4	同↑	函数	提供相对简单的数据计算
method	2	同↑	函数	提供相对复杂的数据计算

data 与 computed 的关系

根据官网的介绍，虽然模板内的表达式很方便，可是对于任何复杂的逻辑，你都应当使用计算属性。

data 只是对于你想要展现的数据的定义，可是，若是该数据须要进行复杂的处理（例如将其变为翻转字符串等），就须要计算属性的帮忙。

类型	做用	备注
data	定义以及展现数据
computed	对数据进行复杂的操做转换

<span>{{reversedMessage}}</span>
data() {
  message: '',
},
computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  },
},

computed 与 method 的区别

固然，咱们能够把同一函数定义为一个方法而不是计算属性，两种方式最后的结果同样的，不一样的是，计算属性是基于他们的依赖进行缓存的，只有相关依赖的值发生改变才会从新求值；而方法只要被触发就会再次执行该函数。若是你不但愿有缓存，请用方法来代替。

类型	是否被缓存	备注
computed	是	只要依赖值有变化就会立马执行
method	否	须要绑定事件

method: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  },
},

computed 与 watch 的区别

在不少状况下，computed 会比 watch 使用起来更加方便，可是当须要在数据变化时执行异步或者开销比较大的状况下，用 watch 会更加合适。

例如官网提供的例子（问与答）。
watch 观察 question 的值，若值有改变会执行方法 getAnswer，而且根据 question 不一样的值，answer 会给出不一样的回答，而且会异步调用 API 返回相应的值，这些都是计算属性作不到的。

类型	目的	备注
computed	依赖变更实时更新数据	更新数据
watch	观察某一特定的值，执行特定的函数	观察数据

<div id="watch-example">
  <p>
    Ask a yes/no question:
      <input v-model="question">
  </p>
  <p>{{answer}}</p>
</div>

var watchExampleVM = new Vue({
  el: "watch-example",
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!',
  },
  watch: {
    question: function(newquestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing';
      this.getAnswer();
    },
  },
  method: {
    getAnswer: _.debounce{
      function() {

        if (this.question.indexOf('?') === -1) {
          this.answer = 'Question ususally contain a question mark -- ?';
        }
        this.answer = 'Thinking';
        var vm = this.axios.get(XXX)
        ` ` `  ` ` `
      },
      500
    },
  },
})