简单聊聊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计算属性和属性侦听内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27Vue 列表页带参数进详情页的操作(router-link)
这篇文章主要介绍了Vue 列表页带参数进详情页的操作(router-link),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-13