位置: IT常识 - 正文

Vue--》计算属性与监视(侦听)属性的使用(vue计算属性和监听属性的区别)

编辑:rootadmin
Vue--》计算属性与监视(侦听)属性的使用

推荐整理分享Vue--》计算属性与监视(侦听)属性的使用(vue计算属性和监听属性的区别),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue中计算属性的原理,vue3的计算属性,vuex 计算属性,vue计算属性参数,vuex 计算属性,vue计算属性和监听属性的区别,vue计算属性可以异步操作?,vue计算属性有哪些,内容如对您有帮助,希望把文章链接给更多的朋友!

目录

计算属性(computed)

监视属性(watch)

监视的两种方法

immediate选项

深度监视


计算属性(computed)

计算属性指的是通过一系列运算之后,最终得到一个值。这个动态计算出来的属性值可以被模板结构或methods方法使用,案例如下:

<div id="root"> R:<input type="text" v-model.number="r"><br> G:<input type="text" v-model.number="g"><br> B:<input type="text" v-model.number="b"> <div class="box" :style="{backgroundColor:rgb}"> {{rgb}} </div> <button @click="show">按钮</button></div><script src="/vue/vue.js"></script><script> const vm = new Vue({ el:'#root', data:{ r:0 , g:0, b:0, }, methods: { show() { console.log(this.rgb); } }, //所有计算属性都要定义到computed节点之下 computed: { // 计算属性在定义的时候,要定义成“方法格式”,在这个方法中会生成好的rgb(x,x,x)的字符串 //实现了代码的复用,只要计算属性中依赖的数据变化了,则计算属性会自动重新赋值 rgb() { return `rgb(${this.r},${this.g},${this.b})` } } })</script>

使用名字动态改变实现计算属性案例:

<div id="root"> <input type="text" v-model="firstname"><br> <input type="text" v-model="lastname"><br> 全名:<span>{{fullname}}</span></div><script src="/vue/vue.js"></script><script> const vm = new Vue({ el:"#root", data:{ firstname:'张', lastname:'三' }, computed:{ fullname:{ //当初次读取fullname或所依赖的数据发生变化时,get被调用 get(){ console.log('get被调用了'); return this.firstname+'-'+this.lastname }, //当主动修改fullname时,set被调用 set(value){ console.log('set', value); const arr = value.split('-'); this.firstname = arr[0] this.lastname = arr[1] } } } })</script>

计算属性:

1.定义:要用的属性不存在,要通过已有的属性得来

2.原理:底层借助了Object.defineproperty方法提供的getter和setter

3.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便

4.备注:计算属性最终会出现在vm上,直接读取使用即可;如果计算属性要被修改,那必须写set函数去响应改变,且set中要引起计算时依赖的数据发生改变。

监视属性(watch)

watch监视(侦听)器允许开发者监视数据的变化,从而针对数据的变化做特定的操作。

监视的两种方法

通过new Vue时传入watch配置:

<div id="root"> <input type="text" v-model="name"></div><script src="./vue.js"></script><script> const vm = new Vue({ el:'#root', data:{ name:'' }, //所有的侦听器,都应该被定义到watch节点下 watch:{ // 侦听器本质上是一个函数,要监视哪个数据的变化,就把数据名作为方法名即可 //newVal是“变化后的新值”,oldVal是“变化之前旧值” name(newVal,oldVal){ //监听name值的变化 console.log("监听到了新值"+newVal, "监听到了旧值"+oldVal); } } })</script>

通过vm.$watch监视:

<div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">切换天气</button></div><script src="./vue.js"></script><script> const vm = new Vue({ el:'#root', data:{ isHot:true }, computed:{ info(){ return this.isHot ? '炎热' : '凉爽' } }, methods:{ changeWeather(){ this.isHot = !this.isHot } }, }) vm.$watch('info',{ handler(newVal,oldVal){ console.log('天气被修改了', newVal, oldVal); } })</script>

immediate选项Vue--》计算属性与监视(侦听)属性的使用(vue计算属性和监听属性的区别)

默认情况下,组件在初次加载完毕后不会调用watch侦听器,如果想让watch侦听器立即被调用,则需要使用immediate选项,immediate的作用是控制侦听器是否自动触发一次,选项的默认值为:false

<div id="root"> <input type="text" v-model="name"></div><script src="./vue.js"></script><script> const vm = new Vue({ el:'#root', data:{ name:'admin' }, watch:{ //定义对象格式的侦听器 name:{ handler(newVal,oldVal){ console.log(newVal, oldVal); }, immediate:true } } })</script>

深度监视

如果watch侦听的是一个对象,如果对象中的属性值发生了变化,则无法被监听到。此时需要使用deep选项,开启深度监听,只要对象中任何一个属性变化了,都会触发“对象的侦听器”。

<div id="root"> <input type="text" v-model="info.name"></div><script src="./vue.js"></script><script> const vm = new Vue({ el:'#root', data:{ info:{ name:'admin' } }, watch:{ info: { handler(newVal){ console.log(newVal); }, //开启深度监听 deep:true } } })</script>

如果想要侦听的对象是子属性的变化,则必须包裹一层单引号。

watch:{ "info.name"(newVal){ console.log(newVal); }}

总结:

1)Vue中的watch默认不监测对象内部值的改变(一层)

2)配置deep:true可以监测对象内部值改变(多层)

3)Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以

4)使用watch时根据数据的具体结构,决定是否采用深度监视

watch能开启异步任务,案例如下:

<div id="root"> <input type="text" v-model="firstname"><br> <input type="text" v-model="lastname"><br> 全名:<span>{{fullname}}</span></div><script src="/vue/vue.js"></script><script> const vm = new Vue({ el:"#root", data:{ firstname:'张', lastname:'三', fullname:'张-三' }, //watch能开启异步任务 watch:{ firstname(val){ setTimeout(()=>{ this.fullname = val + '-' + this.lastname },1000) }, lastname(val){ this.fullname = this.firstname+'-'+val } } })</script>

computed和watch之间的区别:

1.computed能完成的功能,watch都可以完成。

2.watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。

隐性原则:

1.被Vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象

2.不被Vue所管理的函数(定时器的回调函数、ajax的回调函数、Promise的回调函数),最好写成箭头函数,这样this的指向才是vm或组件实例对象。

本文链接地址:https://www.jiuchutong.com/zhishi/300003.html 转载请保留说明!

上一篇:数以千计的网站使用的FTP凭证被劫持(数以千计的拼音是什么)

下一篇:css三角和css 用户见面样式,vertical-align 属性应用,溢出的文字省略号显示,常见布局技巧(css做三角)

  • wps如何设置阴影表格边框(wps如何设置阴影样式)

    wps如何设置阴影表格边框(wps如何设置阴影样式)

  • 电脑任务管理器在哪里(电脑任务管理器快捷键ctrl+alt+)

    电脑任务管理器在哪里(电脑任务管理器快捷键ctrl+alt+)

  • v1818ca是什么手机(v1818c是什么手机)

    v1818ca是什么手机(v1818c是什么手机)

  • 荣耀20pro屏幕刷新率是多少HZ(荣耀20pro刷emui)

    荣耀20pro屏幕刷新率是多少HZ(荣耀20pro刷emui)

  • airpods突然有一只不响了(AirPods突然有一只连不上)

    airpods突然有一只不响了(AirPods突然有一只连不上)

  • 三星A60开不了机(三星a60开不了机怎么回事)

    三星A60开不了机(三星a60开不了机怎么回事)

  • excel如何进行按条件选择(excel如何进行按班级分)

    excel如何进行按条件选择(excel如何进行按班级分)

  • 手机中毒会感染wifi吗(手机中毒会感染病毒吗)

    手机中毒会感染wifi吗(手机中毒会感染病毒吗)

  • 小米10私密相册怎么打开(小米10私密相册为啥要云空间)

    小米10私密相册怎么打开(小米10私密相册为啥要云空间)

  • 微信朋友圈怎么编辑已发朋友圈(微信朋友圈怎么定位到别的城市)

    微信朋友圈怎么编辑已发朋友圈(微信朋友圈怎么定位到别的城市)

  • 抖音拍同款时间短怎么回事

    抖音拍同款时间短怎么回事

  • 苹果11自带什么耳机(苹果11自带什么相机)

    苹果11自带什么耳机(苹果11自带什么相机)

  • 中央处理器主要由什么构成(中央处理器主要指标)

    中央处理器主要由什么构成(中央处理器主要指标)

  • 微信语音连接失败怎么看时间(微信语音连接失败是拒绝吗)

    微信语音连接失败怎么看时间(微信语音连接失败是拒绝吗)

  • word怎么设置页眉边距(word怎么设置页面纸张大小)

    word怎么设置页眉边距(word怎么设置页面纸张大小)

  • 美团会员开通了可以退吗(美团会员开通了有什么用)

    美团会员开通了可以退吗(美团会员开通了有什么用)

  • 微信群消息免打扰还能收到信息(微信群消息免打扰)

    微信群消息免打扰还能收到信息(微信群消息免打扰)

  • vivoz5充满电要多久(vivoz5x充满电要多久)

    vivoz5充满电要多久(vivoz5x充满电要多久)

  • wps自动保存的文件在哪里(wps自动保存的文件路径)

    wps自动保存的文件在哪里(wps自动保存的文件路径)

  • 手机为什么用不了语音打字(手机为什么用不了耳机)

    手机为什么用不了语音打字(手机为什么用不了耳机)

  • 乐视手机锁屏打不开怎么办(乐视手机锁屏键坏了怎么办)

    乐视手机锁屏打不开怎么办(乐视手机锁屏键坏了怎么办)

  • 快手直播封面怎么更新不了(快手直播封面怎么和直播同步)

    快手直播封面怎么更新不了(快手直播封面怎么和直播同步)

  • 支付宝自己生日在哪看(支付宝自己生日祝福怎么看)

    支付宝自己生日在哪看(支付宝自己生日祝福怎么看)

  • iPhone如何设置小圆点(iphone如何设置小孩玩手机时间)

    iPhone如何设置小圆点(iphone如何设置小孩玩手机时间)

  • Angular快速入门(angular 初学者快速上手教程)

    Angular快速入门(angular 初学者快速上手教程)

  • 劳务费个人所得税税率表2023最新
  • 税收分类方法表格
  • 解聘补偿金赔偿标准2023
  • 补缴以前年度增值税以及滞纳金
  • 一般纳税人增值税优惠政策2023
  • 广告设计公司挣钱吗
  • 小规模纳税人的起征点是多少
  • 调整上年度损益
  • 股东经济性质怎么填
  • 库存商品暂估入库
  • 个税生产经营申报流程
  • 承租人融资租赁设备长期应付款包括租赁资产担保余值
  • 职工福利费食堂买菜小票可以报销吗
  • 银行承兑个人可以接受吗
  • 印章刻字怎么收费
  • 非营利组织注册登记证件图片
  • 服务性合同签了能反悔吗
  • 银票和承兑的区别
  • 残保金和工会经费需要计提吗
  • 自然人个税起征点2019税率表
  • 物业税额
  • 纳税人申领发票流程
  • 恢复修改过的图片
  • w11系统激活码
  • linux命令-a
  • mac双系统怎么删除win系统
  • 工程安装成本分录
  • 糖尿病患者在什么情况下无需
  • 临时用工怎样做账
  • elementuiicon
  • 私企固定资产管理办法
  • upload靶场搭建
  • 增资的会计处理方法
  • 纽约公共图书馆开放时间
  • uniapp 信息推送
  • windows. location
  • vue2-elm
  • 普通发票退税流程图
  • saas web
  • 小规模发票跨月冲红怎么做账
  • 通过集中竞价交易减持
  • 营改增后新纳入增值税征税范围的有
  • 增值税税款抵扣
  • 小规模费用发票可以抵扣增值税吗
  • 机动车销售统一专票怎么做账
  • 长期待摊费用会计分录
  • 发票金额与付款金额不一致情况说明
  • 增值税附加税减半政策
  • 库存商品盘盈和盘亏区别
  • 委托加工物资的加工费计入什么科目
  • 外购货物分配给股东
  • 发票入账是借还是贷
  • 电子发票报销需要在背后签名吗?
  • 装修待摊费用当月摊销吗
  • mysql查询语句优先级
  • Suse Linux 10中MySql安装与配置步骤
  • 怎么怎么恢复
  • rhel安装mysql
  • 进程管理界面
  • win2008下的HPC群集是什么有什么作用
  • Win10技巧:如何开启隐藏的锁屏时间设置项
  • os10.8.5升级不了
  • linux 根目录
  • windows10秋季更新
  • win8快捷键设置在哪里设置
  • linux工具包
  • window10 .net3.5
  • nodejs 请求
  • iframe嵌入页面出现跨域问题
  • javascriptj
  • Android Studio Attach source code
  • androidstudio git
  • python 初级
  • 用shell脚本创建用户
  • 使用灭火器时要对准火焰的什么部位喷射
  • 税务局遴选能去什么单位
  • 国家税务总局河南省税务平台
  • 辽宁地方税务局网上申报
  • 关于车辆购置税的申报与缴纳下列说法正确的有
  • 企业税务代码是什么号
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设