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
    },
  },
})

本文固定链接: http://www.js-code.com/vue-js/vue-js_27072.html