Vue2--基本知识 （3）

计算属性–computed

1. 定义：要用的属性不存在，要通过已有属性计算得来。
2. 原理：底层借助了Object.defineproperty方法提供的getter和setter.
3. get函数什么时候执行?
   (1). 初次读取时会执行一次.
   (2). 当依赖的数据发生改变时会被在再次调用.
4. 优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试更方便.
5. 备注:
   • 计算属性最终会出现在vm上,直接读取使用即可.
   • 如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变.

代码示例:

<div id="computed-basics">
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</div>


Vue.createApp({
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    // 计算属性的 getter
    publishedBooksMessage() {
      // `this` 指向 vm 实例
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }
}).mount('#computed-basics')


//含set方法的计算属性
// ...
computed: {
  fullName: {
    // getter
    get() {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set(newValue) {
      const names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

注:当程序仅需使用get读取时可简写计算属性

computed: {
  fullName(){
      return this.firstName + ' ' + this.lastName
  }
}

// 相当于使用get函数

监视属性–watch

1. 当被监视的属性变化时,回调函数自动调用,进行相关操作.
2. 监视的属性必须存在,才能进行监视.
3. 监视的两种写法:
   • new Vue时传入watch配置.
   • 通过vm.$watch监视.

代码示例:

const vm = Vue.createApp({
  data() {
    return {
      firstName: 'Foo',
      lastName: 'Bar',
      fullName: 'Foo Bar'
    }
  },
  watch: {
    firstName(val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName(val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
}).mount('#demo')

computed和watch之间的区别

• computed能完成的功能，watch都可以完成。
• watch能完成的功能，computed不一定能完成，如：watch可以实现异步操作。

两个重要的原则：

1. 所被Vue所管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
2. 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等），最好写为箭头函数，这样this的指向才是vm 或 组件实例对象。