一、Vue监听事件

1、keyup事件

<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}`;
            }
        }
    })
</script>

2、watch事件

a、监听文本框值的变化

<div id="app">
    <!--需要监听文本框数据的改变-->
    <input type="text" v-model="firstName">+
    <input type="text" v-model="lastName">=
    <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: {//使用这个属性可以监视data中指定数据的变化，然后触发这个watch中对应的function处理函数
            'firstName': function (newVal, oldVal) {
                //newVal是改变前的值，oldVal是改变后的值
                this.getFullName();
            },
            'lastName': function () {
                this.getFullName();
            }
        }
    })
</script>

b、监听路由的变化

<div id="app">
    <router-link to="login">登录</router-link>
    <router-link to="register">注册</router-link>

    <router-view></router-view>
</div>

<script>

    var login = {
        template: '<h3>这是登录子组件</h3>'
    };

    var register = {
        template: '<h3>这是注册子组件</h3>'
    };

    var router = new VueRouter({
        routes: [
            {
                path: '/',
                redirect: '/login'
            },
            {
                path: '/login',
                component: login
            },
            {
                path: '/register',
                component: register
            }
        ]
    });

    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router,
        watch: {
            '$route.path': function (newVal, oldVal) {
                console.log(`${newVal} --- ${oldVal}`);
                if (newVal === '/login') {
                    console.log('欢迎进入登录页面');
                } else if (newVal === '/register') {
                    console.log('欢迎进入注册页面');
                }
            }
        }
    })
</script>

3、computed事件

<div id="app">
    <!--需要监听文本框数据的改变-->
    <input type="text" v-model="firstName">+
    <input type="text" v-model="lastName">=
    <input type="text" v-model="fullName">
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: '',
            lastName: '',
        },
        methods: {},
        computed: {//在computed可以定义一些属性，这些属性叫做计算属性的本质就是一个方法，只不过我们在使用这些计算属性的时候是把它们的名称直接当做属性来使用的，并不会把计算属性当做方法调用
            /*注意：计算属性在调用的时候不要加()去调用，直接把它当做普通属性去使用就好*/
            /*只要计算属性这个function内部，所用到的任何data中的数据发生了变化，就会立即重新计算这个计算属性的值*/
            /*注意：计算属性的求值结果会被缓存起来，方便下次直接使用，如果计算属性方法中所依赖的所有数据都没有发生变化，则不会重新求值*/
            'fullName': function () {
                /*computed必须return*/
                return this.firstName + '-' + this.lastName;
            }
        }
    })
</script>

二、methods、watch、computed属性的区别

1、computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当做属性来使用；
2、methods方法表示一个具体的操作，主要书写业务逻辑
3、watch是一个对象，键是需要观察的表达式，值是对应的回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑，可以看做是computed和methods的结合体