Vue计算属性和监听属性

Posted 2023-04-27

参考技术A 使用场景：当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性

计算属性 computed 是基于data中数据进行处理的，data数据变化，他也跟着变化

当data中数据没有发生改变时，我们调用computed中函数n次，只会进行缓存（执行一次）每个计算属性都包含两个set、get 属性

使用场景：数据变化时执行异步或开销较大的操作，可以随时修改状态的变化

watch:类似于监听机制+事件机制。

在大部分情况下我们都会使用computed，但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。watch为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

vue2.0 之计算属性和数据监听

计算属性computed

<template>
  <div>
    <input type="text" name="" v-model="myVal"><br/>
    {{ myValueWithoutNum }}<br/>
    {{ getMyValueWithoutNum() }}<br/>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        myVal: \'\'
      }
    },
    computed: {
      myValueWithoutNum () {
        return this.myVal.replace(/\\d/g, \'\')
      }
    },
    methods: {
      getMyValueWithoutNum () {
        return this.myVal.replace(/\\d/g, \'\')
      }
    }
  }
</script>

<style>
  html {
    height: 100%;
  }
</style>

上例中myValueWithoutNum是计算属性，getMyValueWithoutNum()是方法调用。

 

数据监听watch

<template>
  <div>
    <input type="text" name="" v-model="myVal"><br/>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        myVal: \'\'
      }
    },
    watch: {
      myVal (val, oldval) {
        console.log(val, oldval)
      }
    }
  }
</script>

<style>
  html {
    height: 100%;
  }
</style>