简单聊聊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 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
vue+spring boot实现校验码功能
May 27 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
vue项目proxyTable配置和部署服务器
Apr 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
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
Python Subprocess模块原理及实例
2019/08/26 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
优秀毕业生自荐信
2014/06/10 职场文书
文案策划岗位职责
2015/02/11 职场文书
项目验收申请报告
2015/05/15 职场文书
单位政审意见范文
2015/06/04 职场文书
运动员入场词
2015/07/18 职场文书
保险公司增员口号
2015/12/25 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
关于Python中*args和**kwargs的深入理解
2021/08/07 Python
Nginx限流和黑名单配置
2022/05/20 Servers
Oracle中日期的使用方法实例
2022/07/07 Oracle
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript