初识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函数

二、计算属性缓存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()
    }
  },

三、计算属性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>

　　　　　

四、计算属性的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>

 

 2、侦听器

虽然计算机属性能够适用于大多数状况，但有时也须要一个自定义的侦听器；

暂无