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

您的位置:首頁技術文章
文章詳情頁

vue Watch和Computed的使用總結

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

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

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

export default { data() {return { obj: {a: 1 }} }, watch: {obj: { handler(newVal){console.log(’監(jiān)聽到了’, newVal) }, immediate: true} }, created(){// 無法監(jiān)聽到,因為是對屬性進行的修改操作// 打印一次,且打印結果為修改后的值,this.obj.a = 2 // 可以監(jiān)聽到,因為是直接對 對象進行的 賦值操作// 打印兩次(immediate立即監(jiān)聽會打印一次,修改時打印一次)this.obj = { a: 2} }}

由于 Vue 會在初始化實例時,會對屬性執(zhí)行 getter/setter 轉化過程

所以屬性必須在 data 對象上存在,才能讓 Vue 轉換它,這樣才能讓它是響應式的

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

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

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

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

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

這是因為,this.$set()就是相當于在data中對初始值進行改變

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

export default { watch: {obj: { handler(newVal){ console.log(newVal) }, deep: true, immediate: true} }, created(){// 進行深度監(jiān)聽后,直接修改屬性的變化也可以監(jiān)聽到// 打印兩次(因為immediate)this.obj.a = 2// 無法監(jiān)聽到 對象屬性的增加// 打印一次,且打印結果為添加了新增屬性的對象// 即,它只會 因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()方法進行的數(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)聽到---直接整個數(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. 計算屬性computed(1)計算屬性的set方法 計算屬性可以寫為一個 Object,而非 Function,只是 Function 形式是我們默認使用它的 get 方法,當寫為 Object 時,我們還可以使用它的 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]; } }}

當執(zhí)行 this.fullName = ’Aresn Liang’,computed 的 set 就會調用,firstName 和 lastName 就會被賦值為 Aresn 和 Liang

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

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

以上就是vue Watch和Computed的使用總結的詳細內容,更多關于vue Watch和Computed的使用的資料請關注好吧啦網其它相關文章!

標簽: Vue
相關文章:
主站蜘蛛池模板: 卫生人才网-中国专业的医疗卫生医学人才网招聘网站! | 金刚网,金刚网窗纱,不锈钢网,金刚网厂家- 河北萨邦丝网制品有限公司 | 酒精检测棒,数显温湿度计,酒安酒精测试仪,酒精检测仪,呼气式酒精检测仪-郑州欧诺仪器有限公司 | 阜阳在线-阜阳综合门户| 武汉印刷厂-不干胶标签印刷厂-武汉不干胶印刷-武汉标签印刷厂-武汉标签制作 - 善进特种标签印刷厂 | 涡街流量计_LUGB智能管道式高温防爆蒸汽温压补偿计量表-江苏凯铭仪表有限公司 | 南京泽朗生物科技有限公司-液体饮料代加工_果汁饮料代加工_固体饮料代加工 | 气动调节阀,电动调节阀,自力式压力调节阀,切断阀「厂家」-浙江利沃夫自控阀门 | 液压升降货梯_导轨式升降货梯厂家_升降货梯厂家-河南东圣升降设备有限公司 | 博医通医疗器械互联网供应链服务平台_博医通 | 电磁铁_小型推拉电磁铁_电磁阀厂家-深圳市宗泰电机有限公司 | 洛阳防爆合格证办理-洛阳防爆认证机构-洛阳申请国家防爆合格证-洛阳本安防爆认证代办-洛阳沪南抚防爆电气技术服务有限公司 | 电机铸铝配件_汽车压铸铝合金件_发动机压铸件_青岛颖圣赫机械有限公司 | 综合管廊模具_生态,阶梯护坡模具_检查井模具制造-致宏模具厂家 | 挤出机_橡胶挤出机_塑料挤出机_胶片冷却机-河北伟源橡塑设备有限公司 | 「阿尔法设计官网」工业设计_产品设计_产品外观设计 深圳工业设计公司 | 绿萝净除甲醛|深圳除甲醛公司|测甲醛怎么收费|培训机构|电影院|办公室|车内|室内除甲醛案例|原理|方法|价格立马咨询 | 青岛空压机,青岛空压机维修/保养,青岛空压机销售/出租公司,青岛空压机厂家电话 | 蔬菜配送公司|蔬菜配送中心|食材配送|饭堂配送|食堂配送-首宏公司 | 拉卡拉POS机官网 - 官方直营POS机办理|在线免费领取 | 深圳南财多媒体有限公司介绍 | 稳尚教育加盟-打造高考志愿填报平台_新高考志愿填报加盟_学业生涯规划加盟 | 深圳市索富通实业有限公司-可燃气体报警器 | 可燃气体探测器 | 气体检测仪 | 青岛球场围网,青岛车间隔离网,青岛机器人围栏,青岛水源地围网,青岛围网,青岛隔离栅-青岛晟腾金属制品有限公司 | 煤棒机_增碳剂颗粒机_活性炭颗粒机_木炭粉成型机-巩义市老城振华机械厂 | 滚筒烘干机_转筒烘干机_滚筒干燥机_转筒干燥机_回转烘干机_回转干燥机-设备生产厂家 | 透平油真空滤油机-变压器油板框滤油机-滤油车-华之源过滤设备 | 充气膜专家-气膜馆-PTFE膜结构-ETFE膜结构-商业街膜结构-奥克金鼎 | 考试试题_试卷及答案_诗词单词成语 - 优易学 | 合同书格式和范文_合同书样本模板_电子版合同,找范文吧 | 发光字|标识设计|标牌制作|精神堡垒 - 江苏苏通广告有限公司 | 世界箱包品牌十大排名,女包小众轻奢品牌推荐200元左右,男包十大奢侈品牌排行榜双肩,学生拉杆箱什么品牌好质量好 - Gouwu3.com | 黑龙江京科脑康医院-哈尔滨精神病医院哪家好_哈尔滨精神科医院排名_黑龙江精神心理病专科医院 | 便携式高压氧舱-微压氧舱-核生化洗消系统-公众洗消站-洗消帐篷-北京利盟救援 | 楼梯定制_楼梯设计施工厂家_楼梯扶手安装制作-北京凌步楼梯 | 河南包装袋厂家_河南真空袋批发价格_河南服装袋定制-恒源达包装制品 | 陶氏道康宁消泡剂_瓦克消泡剂_蓝星_海明斯德谦_广百进口消泡剂 | 懂研帝_专业SCI论文润色机构_SCI投稿发表服务公司 | 小威小说网 - 新小威小说网 - 小威小说网小说搜索引擎 | 稳尚教育加盟-打造高考志愿填报平台_新高考志愿填报加盟_学业生涯规划加盟 | 广东机电安装工程_中央空调工程_东莞装饰装修-广东粤标建设有限公司 |