四、Vue计算属性与监听属性

Vue计算属性与监听属性

Vue.JS计算属性

关键词：computed
作用：处理一些复杂逻辑时很有用
例子：反转字符串

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>  //如果没用计算属性则应该是Message.split('').reverse().join('')
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {   //computed声明了一个计算属性reversedMessage
    // 计算属性的 getter，提供的函数将用作属性 vm.reversedMessage 的 getter 
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
      //mv.reversedMessage依赖于mv.Message，在mv.Message发生变化时，mv.reversedMessage也会更新
    }
  }
})
</script>

computed与methods
两者本效果上是一样的，可以相互代替。

区别：
（1）computed是基于他的依赖缓存 ，只有相关依赖发生改变时才会重新取值。
methods在重新渲染的时候，函数纵湖重新调用执行。
（2）获取computed声明的属性的值：{{ 属性名 }}
例子：{{reversedMEssage}}
获取methods函数的值：{{ 函数名() }}
例子：{{reversedMessage()}}
（3）使用computed性能会更好，但如果不希望缓存，可以使用methods属性

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
  <p>使用方法后反转字符串: {{ reversedMessage2() }}</p>   //与computed的区别
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    reversedMessage2: function () {
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

computed的setter
computed属性的默认值是getter，但在需要的时候可以停工一个setter

<div id="app">
  <p>{{ site }}</p>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')   //以空格进行分割，形成字符串数组，与split('')是有区别的
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 运行vm.site是会调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);

运行结果：

Vue.js监听属性

vue.js的监听属性watch,可以通过watch来响应数据的变化
实例：通过watch实现计数器

<div id = "app">
    <p style = "font-size:25px;">计数器: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">点我</button>  //v-on监听事件，监听“点击按钮，后自加”，进行响应
</div>
<script type = "text/javascript">
var vm = new Vue({
    el: '#app',
    data: {
        counter: 1
    }
});
vm.$watch('counter', function(nval, oval) {  //监听，响应数据变化
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>

监听属性格式：

vm.$watch('变量名',function(参数1,参数2){  
//参数1数据变量数据改变前的值，参数2是变量数据改变后的值
	//响应数据
});

例子：千米和米之间进行换算

<div id = "computed_props">
    千米 : <input type = "text" v-model = "kilometers">
    米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>
<script type = "text/javascript">
    var vm = new Vue({
    el: '#computed_props',
    data: {
        kilometers : 0,
        meters:0
    },
    methods: {
    },
    computed :{
    },
    watch : {
        kilometers:function(val) {
            this.kilometers = val;
            this.meters = this.kilometers * 1000
        },
        meters : function (val) {
            this.kilometers = val/ 1000;
            this.meters = val;
        }
    }
    });
    // $watch 是一个实例方法
    vm.$watch('kilometers', function (newValue, oldValue) {
    // 这个回调将在 vm.kilometers 改变后调用
    document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
})
</script>

运行结果：