石桥码农：20 vue计算属性和侦听器

watch的实现原理是什么？

<div>{{ message.split('').reverse().join('') }}</div>

<div>{{ reversedMessage }}</div>
...
data: ()=>({
    message:'hello vue'
  }),
computed:{
    reversedMessage:function(){
      return this.message.split('').reverse().join('')
    }
}

[Vue warn]: Computed property "reversedMessage" was assigned to but it has no setter.

computed:{
    // reversedMessage:function(){
    //   return this.message.split('').reverse().join('')
    // }
    reversedMessage:{
      get(){
        return this.message.split('').reverse().join('')
      },
      set(val){}
    }
},

methods: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
}

<div>{{ reversedMessage2() }}</div>
...
methods: {
    reversedMessage2: function () {
      return this.message.split('').reverse().join('')
    }
},
created(){
    setInterval(()=>{
      this.message += new Date().getTime()%100
    },1000)
}

Object.defineProperty(obj, key, {
    get: function () {
      // 添加订阅者 watcher 到主题对象 Dep
      if (Dep.target) dep.addSub(Dep.target);
      return val
},

// 初始化计算属性
function initComputed (vm: Component, computed: Object) {
  ...
  for (const key in computed) {
    ...
    defineComputed(vm, key, userDef)
    ...
  }
}

function createComputedGetter (key) {
  return function computedGetter () {
    const watcher = this._computedWatchers && this._computedWatchers[key]
    if (watcher) {
      if (watcher.dirty) {
        watcher.evaluate()
      }
      if (Dep.target) {
        watcher.depend()
      }
      return watcher.value
    }
  }
}

get () {
  pushTarget(this)
  let value
  const vm = this.vm
  try {
    // 这里的getter是指向计算属性，而计算属性又会指向data变量的getter
    value = this.getter.call(vm, vm)
  } catch (e) {
    if (this.user) {
      handleError(e, vm, `getter for watcher "${this.expression}"`)
    } else {
      throw e
    }
  } finally {
    // "touch" every property so they are all tracked as
    // dependencies for deep watching
    if (this.deep) {
      traverse(value)
    }
    popTarget()
    this.cleanupDeps()
  }
  return value
}

// src/observer/index.js
Object.defineProperty(obj, key, {
  get: function reactiveGetter () {
    if (Dep.target) {
      // 建立依赖关系
      dep.depend()
      ...
    }
    return value
  },
  set: function reactiveSetter (newVal) {
    ...
    // 依赖发生变化，通知到计算属性重新计算
    dep.notify()
  }
})

1. 首先，data 属性初始化，建立getter/setter
2. computed 计算属性初始化，提供的函数将用作属性 vm.reversedMessage 的 getter
3. 当首次获取 reversedMessage 计算属性的值时，Dep 开始依赖收集
4. 在 message getter 被调用时，如果 Dep 处于依赖收集状态，则判定 message 为 reversedMessage 的依赖，并建立依赖关系
5. 当 message 发生变化时，根据依赖关系，触发 reverseMessage 的重新计算，这是通过dep.notify()达成的

<div id="demo">{{ fullName }}</div>
watch: {
    message: function (val) {
      this.fullName = val + ' ' + new Date().getTime()
    },
},

<p>
  Ask a yes/no question:
  <input v-model="question" />
</p>
<p>{{ answer }}</p>
watch: {
    question: function (newQuestion, oldQuestion){
      this.getAnswer()
    }
},
getAnswer: function () {
  if (!/[?？]/.test(this.question)) {
    this.answer = 'Questions usually contain a question mark. ;-)'
    return
  }
  if (this.answer == 'Thinking...') return
  this.answer = 'Thinking...'
  var vm = this
  axios.get('https://yesno.wtf/api')
    .then(function (response) {
      vm.answer = response.data.answer
    })
    .catch(function (error) {
      vm.answer = 'Error! Could not reach the API. ' + error
    })
}

[Vue warn]: Error in callback for watcher "question": "ReferenceError: axios is not defined"

yarn add axios

import axios from 'axios'

question: {
  handler (newQuestion, oldQuestion) {
    this.getAnswer()
  },
  // 代表了立即执行handler方法
  immediate: true
}

<div>
      <p>obj.a: {{obj.a}}</p>
      <p>obj.a: <input type="text" v-model="obj.a"></p>
</div>
new Vue({
  data: {
    obj: {
      a: 123
    }
  },
  watch: {
    obj: {
      handler(newName, oldName) {
         console.log('obj.a changed');
      },
      deep:true,
      immediate: true
    }
  } 
})

const unWatch = vm.$watch('text', (newVal, oldVal) => {
  console.log(`${newVal} : ${oldVal}`);
})
...
unWatch(); // 手动注销watch

createWatcher (vm, key, handler) {
  let options
  ...
  if (typeof handler === 'string') {
    handler = vm[handler]
  }
  vm.$watch(key, handler, options)
}

Vue.prototype.$watch=function(expOrFn,cb,options){
	const vm = this
    options = options || {}
    options.user = true
    const watcher = new Watcher(vm, expOrFn, cb, options)
    //immediate=true时 马上执行一次
    if (options.immediate) {
      cb.call(vm, watcher.value)
    }
    //返回取消监听的匿名函数
    return function unwatchFn () {
      watcher.teardown()
    }
}