计算属性和监听器

计算属性 computed

<div>{{ computedName }}</div>

data() {
    return {
        name1: 'king',
        name2: 'musi'
    }
},
computed: {
    computedName() {
		return this.name1 + this.name2
    }
}

最终被编译成

<div>kingmusi</div>

可以使用 set 和 get 函数实现更复杂的功能

data() {
    return {
        name1: 'king',
        name2: 'musi'
    }
},
computed: {
    computedName: {
        get() {// 等价于直接 return
            return this.name1 + this.name2
        },
        set(value) {
            const [name1, name2] = value.split(" ")
            this.name1 = name1
            this.name2 = name2
            // 改变依赖值会引起重新计算
        }
    }
},
mounted(){
    this.computedName = 'musi king';
}

最终被编译成

<div>musiking</div>

当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值

• 优点：提高性能

• 理解

  data() {
      return {
          name1: 'king',
          name2: 'musi',
          age: 18
      }
  },
  computed: {
      computedName() {
          console.log('计算了')
  		return this.name1 + this.name2
      }
  },

  • 在渲染时会执行一次，打印一次 计算了
  • 但只改变 age 的值，computedName()是不会重新执行的，即不会打印计算了

• 用函数实现（其实没啥用）

  <div>{{ computedName() }}</div>

  methods: {
      computedName() {
  		return this.name1 + this.name2
      }
  }

监听器 watch

• 监听 Vue 实例上某个变量变化，并执行函数

watch: {
    string(curr, prev){
        // 值类型，可正常拿到新数据和旧数据
    },
    obj: {
        // 引用类型要如此写
        handler(curr){
            // 引用类型，拿不到旧数据，因为存的是地址，所以改变后，oldVal 和 val 都指向同一个地址了
        },
        deep: true  // 深度监听，这样才能拿到 obj 的子集
    }
}