计算属性（computed)

计算属性用于处理复杂的业务逻辑

计算属性具有依赖性，计算属性依赖 data中的初始值，只有当初始值改变的时候，计算属性才会再次计算

计算属性一般书写为一个函数，返回了一个值，这个值具有依赖性，只有依赖的那个值发生改变，他才会重新计算

计算属性的完整写法其实是其中包含了getter和setter方法，声明一个对象，我们在获取数据时会调用get方法，设置数据时会调用set方法

<div id="demo">{{ fullName }}</div>
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  computed: {
	  fullName: {
	    // getter
	    get: function () {
	      return this.firstName + ' ' + this.lastName
	    },
	    // setter
	    set: function (newValue) {
	      var names = newValue.split(' ')
	      this.firstName = names[0]
	      this.lastName = names[names.length - 1]
	    }
	 }
 }

computed和methods的区别

        <div id="app">
            <!-- 原始方式，该方式面对数据计算时比较繁琐，不推荐使用 -->
            <p>名字：{{firstname}} 姓氏：{{lastname}}</p>
            <!-- methods方式，每获取一次数据就调用一次函数 -->
            <p>{{getInfo1()}}</p>
            <p>{{getInfo1()}}</p>
            <p>{{getInfo1()}}</p>
            <p>{{getInfo1()}}</p>
            <!-- computed方式，当数据没有发生变化时，仅调用一次，会将数据进行缓存 -->
            <p>{{getInfo2}}</p>
            <p>{{getInfo2}}</p>
            <p>{{getInfo2}}</p>
            <p>{{getInfo2}}</p>
            <p>{{getInfo2}}</p>
        </div>
    </body>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                firstname: "Kobe",
                lastname: "Bryant"
            },
            methods: {
                getInfo1: function(){
                    console.log("methods");
                    return this.firstname + "" + this.lastname;
                }
            },
            computed: {
                getInfo2: function(){
                    console.log("computed");
                    return this.firstname + "" + this.lastname;
                }
            }
        })
    </script>

注：计算属性会进行缓存，如果多次使用时，依赖的数据没有发生改变,计算属性只会调用一次

侦听属性（watch)

使用watch来监听指定数据的改变，进而调用对应的逻辑处理数据

<div id="app">
    <input type="number" name="" v-model="num">
    {{price}}
    {{total}}
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script >
  let vm = new Vue({
    el: '#app',
    data: {
      price:"55",
      num:"",
      total:""
    },
    watch:{
      num( newVal ){
        this.total = this.price * newVal
      }
    }
  })
</script>