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

 

 二、侦听器

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

暂无

 

posted on 2017-12-21 09:58  cencenyue  阅读(714)  评论(0编辑  收藏  举报