vue知识点

发表于 | 分类于


计算属性、watch（侦听属性）、方法

1、计算属性

计算属性是对普通属性进行进一步计算，监测的是计算属性中的依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算。
计算属性只能是同步，不能是异步。

1
2
3
4
5
6
7
8
9
10
11
12
13
computed: {
  fullName: {
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    set: function (newValue) {
      //this.fullName = newValue 这种写法会报错
      var names = newValue.split(' ')
      this.firstName = names[0]//对它的依赖进行赋值
      this.lastName = names[names.length - 1]
    }
  }
}

2、方法

不能缓存。每次都会执行。

3、watch（侦听属性）

监测的是属性值， 只要属性值发生变化，就会触发handle回调函数。
watch能监听异步任务。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
expoert default {
  data () {
    return { watch1: 'watch1' }
  },
  watch: {
    watch1: {
      handler (newVal, oldVal) { // 正常写法，handler是回调函数
        console.log(newVal, oldVal)
      },
      immediate: true, // 不加这个，初始化组件的时候不会执行回调函数
      deep: true // 不加这个，不会监听对象内部值的变化
    }
  }
}