电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

vue Watch和Computed的使用總結(jié)

瀏覽:61日期:2022-09-29 13:16:31
目錄01. 監(jiān)聽器watch(1)作用(2)屬性和方法(3)監(jiān)聽對(duì)象(4)監(jiān)聽數(shù)組02. 計(jì)算屬性computed(1)計(jì)算屬性的set方法(2)區(qū)別(3)使用場(chǎng)景01. 監(jiān)聽器watch(1)作用 watch:用于監(jiān)聽data中的數(shù)據(jù)變化,只在被監(jiān)聽的屬性值發(fā)生變化時(shí)執(zhí)行

export default { data() {return { number: 1} }, watch:{// 普通監(jiān)聽方法,這里表示監(jiān)聽data中的 number屬性// 第一個(gè)參數(shù)表示改變后的新值,第二個(gè)參數(shù)表示改變前的舊值number(newVal,oldVal){ console.log(newVal); console.log(oldVal);} }}(2)屬性和方法 immediate:表示在組件創(chuàng)建后,立即監(jiān)聽屬性,在最初綁定值的時(shí)候,設(shè)置為:immediate: true handler:監(jiān)聽對(duì)象的時(shí)候使用,發(fā)生變化時(shí),執(zhí)行handler中的方法~ deep:表示深度監(jiān)聽對(duì)象、數(shù)組內(nèi)部的屬性的變化,設(shè)置為:deep: true

export default { data(){return { number: 1} }, watch: {// 監(jiān)聽 number屬性number: {handler(newVal, oldVal){ }, immediate: true, // 立即監(jiān)聽} }}(3)監(jiān)聽對(duì)象 可以監(jiān)聽對(duì)象的直接賦值操作 但不能監(jiān)聽對(duì)象屬性的添加、修改、刪除

export default { data() {return { obj: {a: 1 }} }, watch: {obj: { handler(newVal){console.log(’監(jiān)聽到了’, newVal) }, immediate: true} }, created(){// 無法監(jiān)聽到,因?yàn)槭菍?duì)屬性進(jìn)行的修改操作// 打印一次,且打印結(jié)果為修改后的值,this.obj.a = 2 // 可以監(jiān)聽到,因?yàn)槭侵苯訉?duì) 對(duì)象進(jìn)行的 賦值操作// 打印兩次(immediate立即監(jiān)聽會(huì)打印一次,修改時(shí)打印一次)this.obj = { a: 2} }}

由于 Vue 會(huì)在初始化實(shí)例時(shí),會(huì)對(duì)屬性執(zhí)行 getter/setter 轉(zhuǎn)化過程

所以屬性必須在 data 對(duì)象上存在,才能讓 Vue 轉(zhuǎn)換它,這樣才能讓它是響應(yīng)式的

因此,Vue 無法檢測(cè)到對(duì)象屬性的添加、刪除、修改等操作

默認(rèn)情況下 handler 只監(jiān)聽對(duì)象內(nèi)部屬性的引用的變化

因此,我們只有進(jìn)行賦值操作的時(shí)候,它才會(huì)監(jiān)聽到

可以直接監(jiān)聽對(duì)象的某一個(gè)屬性值 如果這個(gè)屬性是基本類型的值,就可以正常監(jiān)聽

export default { watch: {’obj.a’: { handler(newVal){console.log(newVal) }} }, created(){// 以下兩個(gè)都可以監(jiān)聽到 打印兩次this.obj.a = 2this.obj = { a:2 } }} 可以使用deep屬性進(jìn)行深度監(jiān)聽 只能監(jiān)聽原有屬性的變化,不能監(jiān)聽新增屬性vue 無法監(jiān)聽 this.$set 修改原有屬性的變化

這是因?yàn)椋瑃his.$set()就是相當(dāng)于在data中對(duì)初始值進(jìn)行改變

它可以觸發(fā)監(jiān)聽,但變化體現(xiàn)不出來,即newVal === oldVal

export default { watch: {obj: { handler(newVal){ console.log(newVal) }, deep: true, immediate: true} }, created(){// 進(jìn)行深度監(jiān)聽后,直接修改屬性的變化也可以監(jiān)聽到// 打印兩次(因?yàn)閕mmediate)this.obj.a = 2// 無法監(jiān)聽到 對(duì)象屬性的增加// 打印一次,且打印結(jié)果為添加了新增屬性的對(duì)象// 即,它只會(huì) 因immediate而執(zhí)行一次 ,且打印輸出 {a:1,b:2}this.obj.b = 2// 可以觸發(fā)監(jiān)聽,但無法監(jiān)聽到變化// 打印兩次,兩次值都是{a:2},不能體現(xiàn)變化this.$set(this.obj, ’a’, 2) }}(4)監(jiān)聽數(shù)組 可以監(jiān)聽 數(shù)組的直接賦值操作通過數(shù)組方法的添加、修改、刪除操作通過this.$set()方法進(jìn)行的數(shù)組操作

數(shù)組方法如pop()、push()等,和this.$set(arr, index, newVal)方法

它們可以觸發(fā)監(jiān)聽,但無法體現(xiàn)變化,即newVal === oldVal

無法監(jiān)聽 無法監(jiān)聽數(shù)組的非數(shù)組方法的添加、刪除、修改操作無法監(jiān)聽直接通過索引值改變數(shù)組的變化無法監(jiān)聽直接修改數(shù)組長度的變化

export default { data() {return { arr: [1]} }, watch: {arr: { handler(newVal, oldVal) {console.log(’新:’, newVal)console.log(’舊:’, oldVal) }, immediate: true} }, created() {// 可以監(jiān)聽到---直接整個(gè)數(shù)組賦值this.arr = [2]// 無法監(jiān)聽到---索引賦值、長度修改this.arr[1] = 2this.arr[0] = 2this.arr.length = 2// 可以觸發(fā)監(jiān)聽,但無法監(jiān)聽到變化 => 即新、舊值都是一樣的this.arr.push(2)this.$set(this.arr, 0, 2) }}02. 計(jì)算屬性computed(1)計(jì)算屬性的set方法 計(jì)算屬性可以寫為一個(gè) Object,而非 Function,只是 Function 形式是我們默認(rèn)使用它的 get 方法,當(dāng)寫為 Object 時(shí),我們還可以使用它的 set 方法

computed: { fullName: { get () { return `${this.firstName} ${this.lastName}`; }, set (val) { const names = val.split(’ ’); this.firstName = names[0]; this.lastName = names[names.length - 1]; } }}

當(dāng)執(zhí)行 this.fullName = ’Aresn Liang’,computed 的 set 就會(huì)調(diào)用,firstName 和 lastName 就會(huì)被賦值為 Aresn 和 Liang

computed 可以依賴其它 computed,甚至是其它組件的 data

(2)區(qū)別 計(jì)算屬性和監(jiān)聽器 計(jì)算屬性computed是:監(jiān)聽依賴值的變化 只要依賴值不變,都會(huì)直接讀取緩存進(jìn)行復(fù)用 計(jì)算屬性不能響應(yīng)異步操作中數(shù)據(jù)的變化 需要人為調(diào)用監(jiān)聽器watch是:監(jiān)聽屬性值的變化 只要屬性值發(fā)生變化,都可以觸發(fā)一個(gè)回調(diào)函數(shù) 監(jiān)聽器可以響應(yīng)異步操作中數(shù)據(jù)的變化 自動(dòng)觸發(fā) 計(jì)算屬性和方法 methods 是一個(gè)方法,它可以接受參數(shù),而 computed 不能computed 是可以緩存的,methods 不會(huì)(3)使用場(chǎng)景 當(dāng)一個(gè)屬性受多個(gè)屬性影響的時(shí)候就需要用到computed 當(dāng)一條數(shù)據(jù)影響多條數(shù)據(jù)的時(shí)候就需要用watch,如搜索數(shù)據(jù)

以上就是vue Watch和Computed的使用總結(jié)的詳細(xì)內(nèi)容,更多關(guān)于vue Watch和Computed的使用的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章!

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 阳光1号桔柚_无核沃柑_柑橘新品种枝条苗木批发 - 苧金网 | 沧州友城管业有限公司-内外涂塑钢管-大口径螺旋钢管-涂塑螺旋管-保温钢管生产厂家 | 硅胶制品-硅橡胶制品-东莞硅胶制品厂家-广东帝博科技有限公司 | 济南保安公司加盟挂靠-亮剑国际安保服务集团总部-山东保安公司|济南保安培训学校 | CCE素质教育博览会 | CCE素博会 | 教育展 | 美育展 | 科教展 | 素质教育展 | 淬火设备-钎焊机-熔炼炉-中频炉-锻造炉-感应加热电源-退火机-热处理设备-优造节能 | 【中联邦】增稠剂_增稠粉_水性增稠剂_涂料增稠剂_工业增稠剂生产厂家 | 湖南自考_湖南自学考试网| 银川美容培训-美睫美甲培训-彩妆纹绣培训-新娘化妆-学化妆-宁夏倍莱妮职业技能培训学校有限公司 临时厕所租赁_玻璃钢厕所租赁_蹲式|坐式厕所出租-北京慧海通 | 精密模具加工制造 - 富东懿| 杭州营业执照代办-公司变更价格-许可证办理流程_杭州福道财务管理咨询有限公司 | 大数据营销公司_舆情监测软件_上海SEO公司-文军营销官网 | 北京普辉律师事务所官网_北京律师24小时免费咨询|法律咨询 | 双段式高压鼓风机-雕刻机用真空泵-绍兴天晨机械有限公司 | 耐破强度测试仪-纸箱破裂强度试验机-济南三泉中石单品站 | 防水试验机_防水测试设备_防水试验装置_淋雨试验箱-广州岳信试验设备有限公司 | 苏州同创电子有限公司 - 四探针测试仪源头厂家 | 新疆散热器,新疆暖气片,新疆电锅炉,光耀暖通公司 | 智能化的检漏仪_气密性测试仪_流量测试仪_流阻阻力测试仪_呼吸管快速检漏仪_连接器防水测试仪_车载镜头测试仪_奥图自动化科技 | 礼仪庆典公司,礼仪策划公司,庆典公司,演出公司,演艺公司,年会酒会,生日寿宴,动工仪式,开工仪式,奠基典礼,商务会议,竣工落成,乔迁揭牌,签约启动-东莞市开门红文化传媒有限公司 | 杭州用友|用友软件|用友财务软件|用友ERP系统--杭州协友软件官网 | 等离子空气净化器_医用空气消毒机_空气净化消毒机_中央家用新风系统厂家_利安达官网 | 底部填充胶_电子封装胶_芯片封装胶_芯片底部填充胶厂家-东莞汉思新材料 | 齿轮减速机_齿轮减速电机-VEMT蜗轮蜗杆减速机马达生产厂家瓦玛特传动瑞环机电 | 披萨石_披萨盘_电器家电隔热绵加工定制_佛山市南海区西樵南方综合保温材料厂 | 工业胀紧套_万向节联轴器_链条-规格齐全-型号选购-非标订做-厂家批发价格-上海乙谛精密机械有限公司 | 橡胶电子拉力机-塑料-微电脑电子拉力试验机厂家-江苏天源 | 全自动五线打端沾锡机,全自动裁线剥皮双头沾锡机,全自动尼龙扎带机-东莞市海文能机械设备有限公司 | 无锡门窗-系统门窗-阳光房-封阳台-断桥铝门窗厂[窗致美] | 工业胀紧套_万向节联轴器_链条-规格齐全-型号选购-非标订做-厂家批发价格-上海乙谛精密机械有限公司 | 报警器_家用防盗报警器_烟雾报警器_燃气报警器_防盗报警系统厂家-深圳市刻锐智能科技有限公司 | 上海赞永| 首页 - 军军小站|张军博客| 中医治疗皮肤病_潍坊银康医院「山东」重症皮肤病救治平台 | ETFE膜结构_PTFE膜结构_空间钢结构_膜结构_张拉膜_浙江萬豪空间结构集团有限公司 | 镀锌角钢_槽钢_扁钢_圆钢_方矩管厂家_镀锌花纹板-海邦钢铁(天津)有限公司 | 电销卡_北京电销卡_包月电话卡-豪付网络 | 无锡门窗-系统门窗-阳光房-封阳台-断桥铝门窗厂[窗致美] | 油液红外光谱仪-油液监测系统-燃油嗅探仪-上海冉超光电科技有限公司 | 标准品网_标准品信息网_【中检计量】 | 精密交叉滚子轴承厂家,转盘轴承,YRT转台轴承-洛阳千协轴承 |