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(组件实例对象)

你可能感兴趣的:(vue,vue.js,javascript,前端)