分享更有价值
被信任是一种快乐

JavaScript计算属性与监视属性怎么使用

文章页正文上

本篇内容主要讲解“JavaScript计算属性与监视属性怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript计算属性与监视属性怎么使用”吧!计算属性指的是通过一系列运算之后,最终得到一个值。这个动态计算出来的属性值可以被模板结构或methods方法使用,案例如下:

R:
G:
B:
{{rgb}}

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



全名:{{fullname}}

计算属性:1.定义:要用的属性不存在,要通过已有的属性得来2.原理:底层借助了Object.defineproperty方法提供的getter和setter3.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便4.备注:计算属性最终会出现在vm上,直接读取使用即可;如果计算属性要被修改,那必须写set函数去响应改变,且set中要引起计算时依赖的数据发生改变。watch监视(侦听)器允许开发者监视数据的变化,从而针对数据的变化做特定的操作。通过new Vue时传入watch配置:

通过vm.$watch监视:

今天天气很{{info}}

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

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

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

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

总结:1)Vue中的watch默认不监测对象内部值的改变(一层)2)配置deep:true可以监测对象内部值改变(多层)3)Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以4)使用watch时根据数据的具体结构,决定是否采用深度监视watch能开启异步任务,案例如下:



全名:{{fullname}}

computed和watch之间的区别:1.computed能完成的功能,watch都可以完成。2.watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。隐性原则:1.被Vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象2.不被Vue所管理的函数(定时器的回调函数、ajax的回调函数、Promise的回调函数),最好写成箭头函数,这样this的指向才是vm或组件实例对象。到此,相信大家对“JavaScript计算属性与监视属性怎么使用”有了更深的了解,不妨来实际操作一番吧!这里是云技术网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

相关推荐: jquery寻找父级的方法是什么

本文小编为大家详细介绍“jquery寻找父级的方法是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“jquery寻找父级的方法是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。 4个方法:1、parent(),可以查找当前元素…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册