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


Posted in Vue.js onOctober 05, 2021

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计算属性和属性侦听内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
深入了解Vue3模板编译原理
Nov 19 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
如何使用vue3打造一个物料库
May 08 Vue.js
Vue通过懒加载提升页面响应速度
May 10 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
SSM VUE Axios详解
vue使用Google Recaptcha验证的实现示例
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 #Vue.js
Vue3.0 手写放大镜效果
vue项目多环境配置(.env)的实现
Vue Element-ui表单校验规则实现
Jul 09 #Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 #Vue.js
You might like
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
英国网上花店:Bunches
2016/11/29 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
生物技术毕业生自荐信
2013/10/23 职场文书
园艺师求职信
2014/03/10 职场文书
乡镇办公室工作决心书
2014/03/11 职场文书
聚美优品励志广告词
2014/03/14 职场文书
党员志愿者活动总结
2014/06/26 职场文书
4s店活动策划方案
2014/08/25 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
婚宴新郎致辞
2015/07/28 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
为Centos安装指定版本的Docker
2022/04/01 Servers
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL