[JavaScript知识库]vue计算属性，监视属性

计算属性：computed

    姓<input type="text" v-model="name">//v-model="name"数据绑定
    名<input type="text" v-model="namea">
    全名：<p>{{mes}}</p> //{{mes}}：计算属性的属性名

export default {
     data(){
        return{
          name:1,//上面数据绑定的实例
          namea:2,//上面数据绑定的实例
         }
       }，
       computed:{
   		 mes:{//mes:计算属性的属性名
           get(){//get数据被读取时，就会执行
                 console.log("get调用")
                 console.log(this)
                 return  this.name + "-" + this.namea   
            },
             set(value){//set()数据被修改时，就会执行
                 console.log("set调用了",value)
                 const arr = value.split("-")//变成数组，然后
                 this.name = arr[0]//赋值
                 this.namea = arr[1]//赋值
             }
         }
      }
    }

监视属性

 <input type="text" v-model="asa.name">//v-model="asa.name"数据绑定

 export default {
  data(){
        return{
         asa:{//对象
              name:1,
              sex:2
          },
        }
        }，
 watch:{//watch:监视属性
        asa:{  //asa:属性名
            deep:true,//深度监视，可以监视到对象里面的值的变化
            handler(newvalue,oldvalue){//handler：监视数据变化，第一个参数新的数据，第二个是之前的数据
                console.log('as被修改了',newvalue,oldvalue)
            }
        }
}