初识Vue——计算属性和观察者

一、计算属性

在模板内使用

1、基础例子 

<template>
    <div class="main">
        <div id="reverse_str">
            <p>原始字符串：{{ msg }}</p>
            <p>倒置字符串：{{ reversedmsg }}</p>
        </div>
    </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
        msg: '梦里梦到醒不来的梦',
    }
  },
  computed: {
  //计算属性的getter
    reversedmsg: function () {
        return this.msg.split('').reverse().join('')
    }
  }
}
</script>

<style>
#reverse_str{
    color: powderblue;
}
</style>

解释说明：这里我们声明了一个计算属性reversemsg，我们提供的函数将用作属性的getter函数

2、计算属性缓存vs方法

以上还可以通过在表达式中调用方法来达到同样的效果：

<template>
    <div class="main">
        <div id="method">
            <p>原始字符串：{{ msg1 }}</p>
            <p>倒置字符串：{{ reversedmsg1() }}</p>
        </div>
    </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
        msg1: '浮现你被软禁的红'
    }
  },
  methods: {
      reversedmsg1 () {
          return this.msg.split('').reverse().join('')
      }
  }
}
</script>

<style>
#method{
    color: darksalmon;
}
</style>

　　　　

这两种方式的结果是一模一样的；不同的是，计算属性是基于他们的依赖进行缓存的；计算属性只有在他的相关依赖发生改变时，才会重新求值；这就意味着只要msg没有发生改变，多次访问reversemsg计算属性会立即返回之前计算的结果，而不必再次执行函数；

这也意味着下面的计算属性将不再更新，因为Date.now()不是响应式依赖，

computed: {
      // 计算属性的getter
    now_time: function () {
        return Date.now()
    }
  },

3、计算属性VS侦听属性

侦听属性：观察和相应Vue实例上的数据变动；watch回调

<template>
    <div class="main">
        <div id="sang">

　　　　　　<div class="watch_it">
　　　　　　　　<input v-model="first" />
　　　　　　　　<input v-model="last" />
　　　　　　　　<p>{{ fullname }}</p>
　　　　　　</div>

        </div>
    </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
        sangname: '我如果爱你——',
        author: '绝不学痴情的鸟儿,为绿荫重复单调的歌曲',
    }
  },
  watch: {
      first: function (val) {
          this.fullname = val + ' ' + this.last
      },
    last: function (val) {
          this.fullname = this.first + ' ' + val
    }
  }
}
</script>

<style>
.watch_it input{
    list-style: none;border: 1px seagreen solid;width: 200px;height:30px;color: gray;padding:0 10px;outline: none;
}
</style>

 

上面的代码是命令式的，且重复代码较多，下面来写一下计算属性的版本：

<template>
    <div class="main">
        <div id="sang">
            <p>{{ sang }}</p>
        </div>
    </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
        sangname: '我如果爱你——',
        author: '绝不学痴情的鸟儿,为绿荫重复单调的歌曲',
  },
  computed: {
      // 计算属性的getter
    sang: function () {
        return this.sangname + ' ' + this.author
    }
  }
}
</script>

<style>
#sang{
    color: cadetblue;
}
</style>

　　　　　

4、计算属性的setter

计算属性只有默认的getter，不过在必要的时候你可以自定义一个setter

<template>
    <div class="main">
            <div id="sang">
            <p>{{ sang }}</p>
            </div>
    </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
        sangname: '我如果爱你——',
        author: '绝不学痴情的鸟儿,为绿荫重复单调的歌曲',
    }
  },
  computed: {
    sang: {
        //getter
        get: function () {
            return this.sangname + ' ' + this.author
        },
        set: function (newval) {
            var sentence = newval.split(' ')
            this.sangname = sentence[0]
            this.author = sentence[sentence.length - 1]
        }
    }
  }
}
</script>

<style>
#sang{
    color: cadetblue;
}
</style>

 

 二、侦听器

虽然计算机属性可以适用于大多数情况，但有时也需要一个自定义的侦听器；

暂无