watch & computed计算属性

watch

watch可以监控data中的每一个变量，如果这个变量的值发生了变化，就会触发watch中相关的方法，而且方法会有两个参数，一个新值，一个是老值

例：

下面是一个修改firstName或lastName而改变fullName的例子

<div id="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <span>{{ fullName }}</span>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            firstName: "scarlett",
            lastName: "Jhonssion",
            fullName: "scarlett Jhonssion"
        },
        watch: {
            firstName: function(newval, oldval){
                this.fullName = this.firstName + " " + this.lastName;
            },
            lastName: function(newval, oldval){
                this.fullName = this.firstName + " " + this.lastName;
            }
        }
    });
</script>

watch监控路由

watch除了能够监控data中变量的变化，还能够监控路由的变化

例：

// 3、开启路由对象
new Vue({
    el: "#app",
    router: router,
    watch: {
        "$route": function(newroute, oldroute){
            /**
             * 当可以监控路由后，就可以拿到当前路由的路径，
             * 这样就可以针对不同的页面做不用的处理
             */
            console.log(newroute);
            console.log(oldroute);
        },
    }
});

深度监视

watch开启深度监视

watch: {
    todos: {
        deep: true,	// 深度监视
        handler: function(newValue, oldValue){
            // 处理
        },
    }
}

computed

注意：在computed中的某个方法中，有任何的变量发生改变都会重新运行相应的方法

<div id="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <span>{{ fullName }}</span>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            firstName: "scarlett",
            lastName: "Jhonssion",
        },
        computed: {
            "fullName": function(){
                return this.firstName + this.lastName;
            },
        }
    });
</script>