vue 中的watch 和 computed

Posted 2021-03-25 panghu123

watch ：

Watch属性可以监视 data 中指定数据的变化，一旦被监听的数据值发生了改变，就会立即触发watch对应的 function处理函数：

<template>
     <div> 
        <input type="text" v-model="firstname" /> +
         <input type="text" v-model="lastname" /> = 
        <input type="text" v-model="fullname" />
     </div> 
</template>

export default { 
    data(){ 
        return{ 
            firstname:"",
             lastname:"",
             fullname:"" 
      } 
},
 watch:{ 
        //newVal:最新数据；
        //oldVal:上一次数据 
        "firstname":function(newVal,oldVal){
                 this.fullname = newVal+"-"+this.lastname;
         }, 
        "lastname":function(newVal){ 
                this.fullname = this.firstname+"-"+newVal; 
        } 
    } 
};

使用watch属性监听路由地址:

入口js文件的vue实例上添加watch属性 监听$route.path，只要地址栏中的url发生了改变，就会被监听到

var vm = new Vue({ 
        el: "#app", 
        render: c => c(App4), 
        router:routerObj,
         watch: {
                 "$route.path": function(newVal, oldVal) { 
                        console.log(newVal + ' --- ' + oldVal);
                 } 
        } 
})

在 computed 中定义的属性，叫做计算属性，计算属性的本质是 一个方法，但是我们在使用 这些计算属性的 时候，是把它们的名称，直接当作属性来使用的；并不会把计算属性当作方法去调用.

计算属性computed定义的属性不需要在data中声明

计算属性指向的function内部，所用到的data中的任何数据发生了变化，就会立即触发function，重新计算 这个属性的值

export default { 
    data() { 
        return { 
            firstname: "",
             lastname: "“
         }; 
    }, 
    computed: { 
        fullname: function() { 
                return this.firstname + "-" + this.lastname; 
        }
     } 
};

1：计算属性的求值结 果，会被缓存起来， 方便下次直接使用,提 高运算效率
2： fullname在data中 不能定义
3： 只要firstname或者 lastnama发生了改变， funciton会立即触发执行。