### ① CSS 中濒翻,有哪些方式可以隱藏頁面元素?有什么區(qū)別?
在 CSS 中啦膜,有以下幾種方式可以隱藏頁面元素:
1. display: none; :完全隱藏元素有送,并且不占據(jù)任何空間,對(duì)文檔流沒有影響僧家;
2. visibility: hidden; :隱藏元素雀摘,但仍會(huì)占據(jù)空間,對(duì)文檔流有影響八拱;
3. opacity: 0; :將元素透明度設(shè)置為 0阵赠,元素仍然存在并占據(jù)空間,但不可見肌稻;
4. height: 0; / width: 0; :將元素的高度或?qū)挾仍O(shè)置為 0清蚀,元素仍然存在,但不占據(jù)水平或垂直空間爹谭。
這些方法的區(qū)別如下:
1. display: none; 和 visibility: hidden; 的區(qū)別主要在于是否占據(jù)空間枷邪。display: none; 完全不占據(jù)空間,而 visibility: hidden; 仍占據(jù)空間诺凡;
2. opacity: 0; 和 height/width: 0; 的區(qū)別在于對(duì)元素占據(jù)空間的影響东揣。opacity: 0; 仍占據(jù)空間践惑,而 height/width: 0; 不占據(jù)空間。
根據(jù)實(shí)際需求嘶卧,選擇合適的方式來隱藏元素尔觉。如果需要完全隱藏元素并從文檔流中移除,則使用 display: none;脸候。如果需要保留元素所占據(jù)的空間并隱藏元素穷娱,則使用 visibility: hidden;。如果需要隱藏元素但仍希望元素占據(jù)空間运沦,則使用 opacity: 0; 或?qū)⒏叨?寬度設(shè)置為 0泵额。
###② 什么是 JS 對(duì)象的可枚舉性(enumerable)?
在 JavaScript 中携添,每個(gè)對(duì)象都有一個(gè)屬性描述對(duì)象(property descriptor)嫁盲,其中包含了一些元信息,包括屬性是否可枚舉烈掠。
一個(gè)可枚舉的屬性是指該屬性可以被枚舉到羞秤,例如使用 for...in 循環(huán)遍歷對(duì)象時(shí)會(huì)枚舉對(duì)象中所有可枚舉的屬性。默認(rèn)情況下左敌,對(duì)象字面量和一些內(nèi)置對(duì)象原型上的方法(如 Object.prototype.toString())定義的屬性是可枚舉的瘾蛋。
可以通過 Object.defineProperty() 或 Object.defineProperties() 方法來控制屬性的可枚舉性,將 enumerable 屬性設(shè)置為 false 可以讓屬性不可枚舉矫限。
可枚舉性是一個(gè)很重要的概念哺哼,它可以用于控制對(duì)象的屬性是否可以被外部訪問,或者在遍歷對(duì)象屬性時(shí)選擇需要遍歷的屬性叼风。在某些情況下取董,不希望某些屬性被外部訪問或者遍歷,這時(shí)可以將其設(shè)置為不可枚舉无宿。
③ Vue 中 computed 和 watch 區(qū)別茵汰?分別適用于什么場(chǎng)景?
Vue 中的 computed 和 watch 都是用于響應(yīng)式數(shù)據(jù)的處理孽鸡,但它們的作用略有不同蹂午。
computed 是計(jì)算屬性,它的值會(huì)被緩存彬碱,在依賴的數(shù)據(jù)發(fā)生變化時(shí)才會(huì)重新計(jì)算画侣。computed 的使用場(chǎng)景通常是需要根據(jù)現(xiàn)有數(shù)據(jù)計(jì)算得到某個(gè)新的值,并且這個(gè)值不會(huì)頻繁發(fā)生變化堡妒。例如,計(jì)算購(gòu)物車中商品數(shù)量及總價(jià)等溉卓。
watch 是觀察者皮迟,當(dāng)監(jiān)聽的數(shù)據(jù)發(fā)生變化時(shí)搬泥,會(huì)執(zhí)行相應(yīng)的回調(diào)函數(shù)。watch 的使用場(chǎng)景通常是需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作伏尼,或者需要執(zhí)行一些副作用(side effect)忿檩,例如請(qǐng)求后臺(tái)數(shù)據(jù)、搜索關(guān)鍵詞聯(lián)想等爆阶。
兩者的區(qū)別可以總結(jié)如下:
1. computed 是計(jì)算屬性燥透,watch 是觀察者;
2. computed 會(huì)緩存計(jì)算結(jié)果辨图,watch 不會(huì)班套;
3. computed 的值只有在相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新計(jì)算,watch 監(jiān)聽的數(shù)據(jù)變化時(shí)都會(huì)執(zhí)行回調(diào)函數(shù)故河;
4. computed 適用于計(jì)算得出某個(gè)新值吱韭,并且該值不會(huì)頻繁發(fā)生變化的場(chǎng)景;watch 適用于需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作鱼的,或者執(zhí)行一些副作用的場(chǎng)景理盆。
總之,computed 和 watch 在 Vue 中都是非常實(shí)用的工具凑阶,選擇哪種方式取決于具體的業(yè)務(wù)需求猿规。