简单聊聊Vue中的计算属性和属性侦听

1. 计算属性

定义

计算属性：要用的属性不存在，要通过已有属性计算得来，计算属性要有一个全新的配置项computed
对vue来说，data里面的数据就是属性，只要vue中的数据改变，就会重新解析模板，遇到插值语法里的方法会重新调用

原理

底层借助了objcet.defineproperty方法提供的getter和setter。

get函数什么时候执行？

初次读取时会执行一次。
当依赖的数据发生改变时会被再次调用。

优势

与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

备注

计算属性最终会出现在vm(vue实例)上，直接读取使用即可。
如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

语法: 1.简写方式:

 computed: {
     "计算属性名" () {
         return "值"
     }
 }

需求: 求2个数的和显示到页面上

<template>
  <div>
    <p>{{ num }}</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      a: 10,
      b: 20
    }
  },
  // 计算属性:
  // 场景: 一个变量的值, 需要用另外变量计算而得来
  /*
    语法:
    computed: {
      计算属性名 () {
        return 值
      }
    }
  */
 // 注意: 计算属性和data属性都是变量-不能重名
 // 注意2: 函数内变量变化, 会自动重新计算结果返回
  computed: {
    num(){
      return this.a + this.b
    }
  }
}
</script>

<style>

</style>

语法: 2.完整写法:

计算属性写成配置对象的格式:对象中用get和set函数

get的作用: 当有人读取fullname时，get就会被调用，且返回值就作为计算属性的值 (get一定要写return)

get什么时候调用？ 1.初次读取fullname时。 2.所依赖的数据发生变化时。

 get(){
                console.log('get被调用了')
                // console.log(this) //  此处的this是vm(vue实例)
                return this.firstname + '-' + this.lastname
            },

set:当计算属性的值被修改时被调用形参接收的是传入的新值

  ...
  computed:{
      fullname:{
          //get有什么作用？当有人读取fullname时，get就会被调用，且返回值就作为fullname的值
          //get什么时候调用？1.初次读取fullname时。2.所依赖的数据发生变化时。
          get(){
              console.log('get被调用了')
              // console.log(this) //此处的this是vm
              return this.firstname + '-' + this.lastname
          },
          //set什么时候调用? 当fullname被修改时。
          set(value){
              console.log('set',value)
              const arr = value.split('-')
              this.firstname = arr[0]
              this.lastname = arr[1]
          }
      }
  }
})

2. 监视（侦听）属性

<!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
<button @click="ishot = !ishot">切换天气</button>

1. 监视属性watch：

当被监视的属性变化时, handler回调函数自动调用, 进行相关操作

监视的属性必须存在，才能进行监视！！

      ...
      // 写法1. 传入watch配置 侦听ishot属性
      
      watch:{
          ishot:{
              immediate:true, //初始化时让handler调用一下
              
              //handler什么时候调用？当ishot发生改变时。
              
              handler(newvalue,oldvalue){
                  console.log('ishot被修改了',newvalue,oldvalue)
              }
          }
      }
  })
  
  
  // 写法2. 通过vm.$watch监视
vm.$watch('ishot',{
   immediate:true, //初始化时让handler调用一下，默认是false
   //handler什么时候调用？当ishot发生改变时。
   handler(newvalue,oldvalue){ // 有两个参数，一个是新值，一个是旧值
   	console.log('ishot被修改了',newvalue,oldvalue)
   }
})

2. 深度监视

深度监视：

1）vue中的watch默认不监测对象内部值的改变（一层）。
2）配置deep:true可以监测对象内部值改变（多层）。

备注：

1）vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以！
2）使用watch时根据数据的具体结构，决定是否采用深度监视。

data:{
	ishot:true,
	numbers:{
		a:1,
		b:1
	}
},
watch:{
	// 监视多级结构中某个属性的变化（原始写法是要加引号的，简写可以不加，但这种情况要加，否则报错）
	/* 'numbers.a':{
		handler(){
			console.log('a被改变了')
		}
	} */
	//监视多级结构中所有属性的变化
	numbers:{
		deep:true, // 如果不开启这个，那监测的就是numbers的地址是否有变化
		handler(){
			console.log('numbers改变了')
		}
	}
}

监视属性-简写

当监视属性中只有handler()而不需要开启其他配置项时才能简写

watch:{
	ishot(newvalue,oldvalue){
		console.log('ishot被修改了',newvalue,oldvalue,this)
	}
}

/* vm.$watch('ishot',function (newvalue,oldvalue) {
	console.log('ishot被修改了',newvalue,oldvalue,this)
}) */

3. 区别和原则

computed和watch之间的区别

computed能完成的功能，watch都可以完成。
watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

两个重要的小原则

所有被vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。
所有不被vue所管理的函数（定时器的回调函数、ajax的回调函数等、promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或组件实例对象。

watch:{
	firstname(val){
		settimeout(()=>{
			console.log(this) //vue实例对象，若用普通函数则返回window
			this.fullname = val + '-' + this.lastname
		},1000);
	},
	lastname(val){
		this.fullname = this.firstname + '-' + val
	}
}

总结

到此这篇关于vue中计算属性和属性侦听的文章就介绍到这了,更多相关vue计算属性和属性侦听内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！

黄山市民网：https://www.huangshanshimin.com/

目录