Vue学习之理解计算属性computed

计算属性computed

1.什么计算属性

• 基础使用：一样是实现data中数据的反转表示，有如下两种不一样写法，，显然第一种比第二种结构简洁和清晰，特别是在屡次使用的时候，template里面的代码将更加混乱。

  <p>Computed reversed message: "{{ reversedMessage }}"</p>
  <p>Computed reversed message: "{{message.split('').reverse().join('')}}"</p>

  var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
           },
    computed: {
    reversedMessage: function () {
           // `this` points to the vm instance
         return this.message.split('').reverse().join('')
    }}})

• 使用场景：经过以上的使用咱们可知，在须要对数据进行复杂处理，且可能屡次使用的状况下，尽可能采起计算属性的方式。

• 特色：

  • ①使得数据处理结构清晰；

  • ②依赖于数据，数据更新，处理结果自动更新；

  • ③计算属性内部this指向vm实例；

  • ④在template调用时，直接写计算属性名便可；

  • ⑤经常使用的是getter方法，获取数据，也可使用set方法改变数据；

  • ⑥相较于methods，无论依赖的数据变不变，methods都会从新计算，可是依赖数据不变的时候computed从缓存中获取，不会从新计算。

2.computed原理

//初始化计算属性
  function initComputed (vm: Component, computed: Object) {
     const watchers = vm._computedWatchers = Object.create(null)
     for (const key in computed) {
        const userDef = computed[key]
        const getter = typeof userDef === 'function' ? userDef : userDef.get
        //经过watch为计算属性添加动态响应.
        watchers[key] = new Watcher(vm, getter, noop, computedWatcherOptions)
        //组件定义的计算属性已经在组件原型上定义了。咱们只须要在这里定义实例化的计算属性。
        if (!(key in vm)) {
        defineComputed(vm, key, userDef)}}
     }

  function defineComputed (target: any, key: string, userDef: Object | Function) {
       //userDef若是是函数类型，只有getter
       if (typeof userDef === 'function') {
          sharedPropertyDefinition.get = createComputedGetter(key)
          sharedPropertyDefinition.set = noop
       } else {
        //userDef若是是对象类型，可能存在getter或者setter
          sharedPropertyDefinition.get = userDef.get
          ? userDef.cache !== false
          ? createComputedGetter(key): userDef.get: noop
          sharedPropertyDefinition.set = userDef.set? userDef.set: noop}

      Object.defineProperty(target, key, sharedPropertyDefinition)}

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