6. Vue 中的 watch 、computed 和 methods

watch 、computed 和 methods 对比

案例需求：监听 姓 和 名 两个文本框，只要有一个变化，则 全名 改变，分别 methods，watch，computed 实现

<div id="app">
    <input type="text" v-model="firstname" 
    @keyup="getFullname"> +
    <input type="text" v-model="lastname" 
    @keyup="getFullname"> =
    <input type="text" v-model="fullname">
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstname: '',
            lastname: '',
            fullname: ''
        },
        methods: {
            getFullname() {
                this.fullname = this.firstname + '-' + 
	                this.lastname
            }
        },
        watch: {
            // 第一个参数是新数据，第二个参数是旧数据
            'firstName': function (newVal, oldVal) {
        		this.fullName = newVal + this.lastName;
            },
            'lastName': function (newVal, oldVal) {
        		this.fullName = this.firstName + newVal;
            }
        },
        computed: { 
            'fullname': function () {
                return this.firstname + this.lastname
            }
        }
    });
</script>

watch 、computed 和 methods 都以函数为基础，各自又不相同

• watch：观察，根据被观察者的变化进行相应的变化，可以看作 computed 和 methods 的结合，常用来监听路由对象的变化
• computed：计算，当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性。computed是具有缓存的，这就意味着只要计算属性的依赖没有进行相应的数据更新，那么computed会直接从缓存中获取值，多次访问都会返回之前的计算结果。
• methods：主要写业务逻辑