vue学习3--计算属性，监视属性等

1.计算属性

data中的数据任何一个数据一旦发生变化，模板就会重新解析，方法用到变化的数据，方法也会重新调用一次。

对于vue来说，data中的数据即是属性

1.定义：要用的属性不存在，要通过已有的属性计算得来；
2.原理：底层借助了Object.defineproperty方法提供getter和setter；
3.get函数什么时候执行？
（1）初次读取时候会执行一次
（2）当依赖的数据发生改变时会被再次调用
4.优势：缓存机制。与methods相比，内部的缓存机制使得效率更高，调试方便
5.备注：
（1）计算属性最终会出现在vm上，直接读取使用即可
（2）如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
计算属性简写：在确定计算属性只读不改的时候可以用简写形式

// 计算属性get方法
computed: {
   fullName:{
     // get的作用：当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
     // get什么时候被调用？1.初次读取fullName的时候；2.所依赖的数据发生变化的时候。
     get() {
       return this.firstName + '-' + this.lastName;
      }  
   }
}
            

// 计算属性简写(在确定计算属性只读不改的时候可以用简写形式），==在调用时不加括号==
computed: {
   fullName() {
       return this.firstName + '-' + this.lastName; 
   }
}

2.监视属性

1.代码书写格式

watch:{
   ishot:{
      // 初始化时让handler执行一下
     immediate: true
      // 监视多层级的改变 
     deep: true
     handler(){
     	console.log("修改了天气")
      }
   }
},
// 简写形式 
watch:{
   ishot(){
     	console.log("修改了天气")
      }
 },

1.监视属性必须存在才能监视；
2.不需要immediate和deep的时候可以简写。

watch和computed的对比：
1.computed能完成的功能，watch都可以完成，watch能完成的功能，computed不一定能完成
（计算属性不能开启异步任务（定时器），因为计算属性是有return返回值的）
2.两个重要的原则：
（1）被vue所管理的函数最好写成普通函数，这样的this的指向才是vm或者是vc（组件实例对象）
（2）所有不被vue所管理的函数（定时器的回调函数，ajax的回调函数等），最好写成箭头函数，这样的this的
	指向才是vm或vc（组件实例对象）