位置: 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做三角)

  • 抖音对方把我移出会显示什么(抖音对方把我移除粉丝了他还能看到我的作品吗)

    抖音对方把我移出会显示什么(抖音对方把我移除粉丝了他还能看到我的作品吗)

  • 苹果11屏幕左侧一条绿线(苹果11屏幕左侧出现一条阴影怎么回事呢)

    苹果11屏幕左侧一条绿线(苹果11屏幕左侧出现一条阴影怎么回事呢)

  • 系统分区多大合适(电脑系统分区多少g)

    系统分区多大合适(电脑系统分区多少g)

  • 骁龙845的手机有哪些(骁龙845手机有哪些便宜的)

    骁龙845的手机有哪些(骁龙845手机有哪些便宜的)

  • qq密保手机号怎么解除(qq密保手机号怎么查看)

    qq密保手机号怎么解除(qq密保手机号怎么查看)

  • 淘宝店铺升级规则(淘宝店铺升级店铺的步骤)

    淘宝店铺升级规则(淘宝店铺升级店铺的步骤)

  • 苹果11防水吗掉水里(苹果11防水吗掉水里几秒)

    苹果11防水吗掉水里(苹果11防水吗掉水里几秒)

  • 网易云音乐怎样搜电台(网易云音乐怎样下载到本地)

    网易云音乐怎样搜电台(网易云音乐怎样下载到本地)

  • 耳机电量怎么显示(耳机电量怎么显示百分比)

    耳机电量怎么显示(耳机电量怎么显示百分比)

  • 苹果xr听筒声音突然变小(苹果听筒声音突然变小)

    苹果xr听筒声音突然变小(苹果听筒声音突然变小)

  • 电脑开机鼠标键盘没反应(电脑开机鼠标键盘亮一下就灭了)

    电脑开机鼠标键盘没反应(电脑开机鼠标键盘亮一下就灭了)

  • 一个人可以申请几个快手号(一个人可以申请几张信用卡)

    一个人可以申请几个快手号(一个人可以申请几张信用卡)

  • oppoa11支持5g网络吗(oppoa11可以放5g卡吗)

    oppoa11支持5g网络吗(oppoa11可以放5g卡吗)

  • 京东的优惠券可以送人吗(京东的优惠券可以赠送吗)

    京东的优惠券可以送人吗(京东的优惠券可以赠送吗)

  • 微信上买电影票能退吗(微信上买电影票怎么退票)

    微信上买电影票能退吗(微信上买电影票怎么退票)

  • 苹果的时间规划局在哪里(苹果的时间规划怎么设置)

    苹果的时间规划局在哪里(苹果的时间规划怎么设置)

  • 如何在中国使用discord(如何在中国使用YouTube)

    如何在中国使用discord(如何在中国使用YouTube)

  • 小米5是双卡双待吗(小米5双卡双待怎么用)

    小米5是双卡双待吗(小米5双卡双待怎么用)

  • datedif函数怎么用算时间差(datedif函数怎么计算工龄)

    datedif函数怎么用算时间差(datedif函数怎么计算工龄)

  • ipad mini5充电器多少瓦(ipad mini5充电器参数)

    ipad mini5充电器多少瓦(ipad mini5充电器参数)

  • 无法连接到apple store(无法连接到apple watch)

    无法连接到apple store(无法连接到apple watch)

  • 互相保可以保多少大病(互相保好吗)

    互相保可以保多少大病(互相保好吗)

  • Win7打开软件提示“无法打开这个应用”(win7打开软件提示0xc0000005)

    Win7打开软件提示“无法打开这个应用”(win7打开软件提示0xc0000005)

  • 【产品新体验】CSDN. 云IDE体验与功能使用教程(保姆级教程)(产品体验是什么意思)

    【产品新体验】CSDN. 云IDE体验与功能使用教程(保姆级教程)(产品体验是什么意思)

  • 解决Vue报错:Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location(vue uncaught typeerror)

    解决Vue报错:Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location(vue uncaught typeerror)

  • 行政单位要不要税号
  • 车险退到对公账户会计分录是
  • 应付中转是什么科目
  • 抵扣联的抵扣期限
  • 非居民企业转让财产所得税
  • 股权转让如何避免土地增值税
  • 固定资产盘盈盘亏的会计科目
  • 贷款 保险费
  • 建筑资质挂靠费用怎么写会计分录?
  • 异地开票需要在当地交税吗
  • 公司用上年多缴的社保
  • 金融机构利息超过多少不合法
  • 季度申报表营业成本怎么填
  • 个税少报有什么后果
  • 土地使用权出让金
  • 投资性房地产转为存货
  • 汇总会计报表和合并会计报表均是
  • 有质量问题的产品案例
  • 资源综合利用企业税收优惠
  • 预提成本的会计处理
  • 产品质量监督检验
  • windows 10如何使用
  • 公司支出的消防费用
  • 撤销权之诉需要哪些证据
  • 怎么删除office
  • php cgi配置
  • 华为鸿蒙os升级机型曝光
  • qbdagent2002.exe - qbdagent2002是什么进程 有什么用
  • 电梯安装包工头赚多少
  • vue2.0解决跨域问题
  • 进出口商品的税率是多少
  • window10为什么右键就卡住
  • PHP:imagesetthickness()的用法_GD库图像处理函数
  • 买货没发票如何入账
  • 阿圭罗来自哪里
  • wordpress调用指定文章
  • 工业企业成本核算的内容是
  • 企业取得交易性金融资产时
  • thinkphp6多表关联查询
  • 新公司有免税政策吗
  • 将本月发生的制造费用总额按生产工人
  • 公司的钱借给个人必须要有利息吗
  • js改变内容
  • 织梦如何使用
  • index.php备份文件
  • python id 函数
  • 计提以前年度的企业所得税
  • 营业成本的构成
  • 字符串合并函数
  • sql server 使用
  • mysql命令行工具是什么
  • 工业企业出租设备租金计入什么科目
  • 存货盘点的方法有哪些
  • 房产税征收标准2020
  • 注销时其他应付款借方余额怎么账务处理
  • 库存商品建账
  • 外贸公司收取国家税费吗
  • 购买股票如何操作
  • 企业为员工代缴社保怎样在网上申报
  • 房地产开发企业增值税税率
  • mysql三层架构
  • 查找非空顺序表l中第一个最大的元素
  • sql教程
  • Centos下Mysql安装图文教程
  • mysql绿色版安装配置教程
  • 360 sesvc.exe
  • win10有三个系统
  • freebsd做服务器
  • 直通车和百度竞价的区别
  • windows10粘滞键
  • win8显示隐藏文件夹
  • 2016年微软股价
  • win8自带杀毒软件 关闭
  • shell 脚本 判断
  • python内置函数用来打开或创建文件并返回文件对象
  • javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
  • 迅雷继续下载
  • 企业公示信息怎么查询
  • 临时税务登记纳税人
  • 税务部门意识形态
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设