vue计算属性和监听器实例解析

<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('')
  }
 }
})

console.log(vm.reversedmessage) // => 'olleh'
vm.message = 'goodbye'
console.log(vm.reversedmessage) // => 'eybdoog'

<p>reversed message: "{{ reversedmessage() }}"</p>
// 在组件中
methods: {
 reversedmessage: function () {
  return this.message.split('').reverse().join('')
 }
}

computed: {
 now: function () {
  return date.now()
 }
}

<div id="demo">{{ fullname }}</div>
var vm = new vue({
 el: '#demo',
 data: {
  firstname: 'foo',
  lastname: 'bar',
  fullname: 'foo bar'
 },
 watch: {
  firstname: function (val) {
   this.fullname = val + ' ' + this.lastname
  },
  lastname: function (val) {
   this.fullname = this.firstname + ' ' + val
  }
 }
})

var vm = new vue({
 el: '#demo',
 data: {
  firstname: 'foo',
  lastname: 'bar'
 },
 computed: {
  fullname: function () {
   return this.firstname + ' ' + this.lastname
  }
 }
})

// ...
computed: {
 fullname: {
  // getter
  get: function () {
   return this.firstname + ' ' + this.lastname
  },
  // setter
  set: function (newvalue) {
   var names = newvalue.split(' ')
   this.firstname = names[0]
   this.lastname = names[names.length - 1]
  }
 }
}
// ...

<div id="watch-example">
 <p>
  ask a yes/no question:
  <input v-model="question">
 </p>
 <p>{{ answer }}</p>
</div>
<!-- 因为 ajax 库和通用工具的生态已经相当丰富，vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你*选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<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.getanswer()
  }
 },
 methods: {
  // `_.debounce` 是一个通过 lodash 限制操作频率的函数。
  // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
  // ajax 请求直到用户输入完毕才会发出。想要了解更多关于
  // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
  // 请参考：https://lodash.com/docs#debounce
  getanswer: _.debounce(
   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
     })
   },
   // 这是我们为判定用户停止输入等待的毫秒数
   500
  )
 }
})
</script>