简单聊聊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中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
如何优化vue打包文件过大
Apr 13 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使用feof()函数读文件的方法
2014/11/07 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
JavaScript 代码压缩工具小结
2012/02/27 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
Python 解析xml文件的示例
2020/09/29 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
校园文化标语
2014/06/18 职场文书
基层党员对照检查材料
2014/08/25 职场文书
2014年村委会工作总结
2014/11/24 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
Nginx限流和黑名单配置
2022/05/20 Servers