简单聊聊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 相关文章推荐
vue使用element-ui实现表单验证
Dec 13 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
vue组件是如何解析及渲染的?
Jan 13 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 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
php4的session功能评述(一)
2006/10/09 PHP
PHP获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
linux下安装php的memcached客户端
2014/08/03 PHP
php实现的用户查询类实例
2015/06/18 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
利用Python爬取可用的代理IP
2016/08/18 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
九州传奇上机题
2014/07/10 面试题
J2EE是技术还是平台还是框架
2016/08/14 面试题
英语专业学子个人的自我评价
2013/10/02 职场文书
客服主管岗位职责
2013/12/13 职场文书
党员培训思想汇报
2014/01/07 职场文书
人事任命书怎么写
2014/06/05 职场文书
学校运动会报道稿
2014/09/23 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis