2020.7.1廣州某博公司

1.簡單說下setTimeout(fn,0)中的0代表的是什么？如果我想在vue實現(xiàn)功能可以用什么方法代替屉符？

答： JavaScript 是單線程執(zhí)行的，也就是無法同時執(zhí)行多段代碼。當某一段代碼正在執(zhí)行的時候，所有后續(xù)的任務都必須等待僚焦，形成一個隊列，一旦當前任務執(zhí)行完畢绣的，再從隊列中取出下一個任務叠赐。這也常被稱為 “阻塞式執(zhí)行”。
setTimeout(fn,0)： 這個時間設為 0屡江，就代表立即插入隊列芭概，但不是立即執(zhí)行，仍然要等到主線程把"任務隊列"現(xiàn)有的事件都處理完惩嘉，才會得到執(zhí)行罢洲。所以 setTimeout 并不能保證執(zhí)行的時間，是否立即執(zhí)行文黎，取決于 JavaScript 線程是擁擠還是空閑惹苗。
在某種程度上，我們可以利用setTimeout(fn,0)的特性耸峭，修正瀏覽器的任務順序桩蓉。

console.log(1); 
setTimeout(function(){
    console.log(2); 
}, 0); 
console.log(3); 
執(zhí)行j結果為：1，3劳闹，2

vue異步更新隊列：http://www.reibang.com/p/19efc25e2a57

2.用vue實現(xiàn)樣式綁定院究，可以用class或者內聯(lián)樣式，最少寫出2個本涕？

1. 綁定class–對象語法
為v-bind:class設置一個對象业汰，可以動態(tài)切換class：

<!-- 綁定class-對象語法 -->
<body>
    <div id="app">
        <!-- 類active依賴于數(shù)據(jù)isActive，當其為true時菩颖，div擁有類名Active -->
        <div :class="{'active': isActive}"></div>
        
        <!-- 對象中也可以傳入多個屬性样漆，動態(tài)切換class -->
        <!-- <div class="static" :class="{'active':isActive, 'error':isError}"></div> -->
    </div>

    <script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                isActive: true,
                isError: false,
            },
        })
    </script>
</body>

當:class的表達式過長或邏輯復雜時，還可以綁定一個計算屬性：

<!-- 綁定class-對象語法-綁定計算屬性 -->
<body>
    <div id="app">
        <div :class="classes"></div>
    </div>

    <script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                isActive: true,
                isError: null,
            },

            computed: {
                classes: function() {
                    return {
                        active: this.isActive && !this.error,
                        'text-fail': this.error && this.error.type === '',
                    }
                }
            }
        })
    </script>
</body>

2. 綁定class–數(shù)組語法
當需要應用多個class時晦闰，可以使用數(shù)組語法放祟，給:class綁定一個數(shù)組，應用一個class列表：

<body>
    <div id="app">
        <!-- 結果為擁有active與error兩個類名 -->
        <div :class="[activeCls, errorCls]"></div>
    </div>

    <script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                activeCls: 'active',
                errorCls: 'error',
            },
        })
    </script>
</body>

3. 綁定內聯(lián)樣式
使用:style可以給元素綁定內聯(lián)樣式鹅髓，與:class類似舞竿，也有對象語法和數(shù)組語法。

  • 內聯(lián)樣式窿冯，跟一般css添加樣式相似骗奖，多了一個綁定，樣式添加通過數(shù)組方式醒串，數(shù)組中以字符串顯示
    <div id='box' :class="['one','two']">{{msg}}</div>
  • 數(shù)組中添加三元表達式执桌，只有為true時候才起作用
    下邊這種在變換樣式的時候采用，需要另外在data中說明flag的值
    <div id='box1' :class=['one','two',flag?'three':'']>{{msg}}這種方法不好讀</div>
    三元表達式看著麻煩芜赌，使用對象形式好一點
    <div id='box12' :class="['one','two',{three:flag}]">{{msg}}</div>
    然后有了下面這兩種形式
    <div id='box2' :class="[{oen:true},{two:true},{'three':true}]">{{msg}}</div>
    使用對象添加樣式的時候仰挣，對象的屬性是類名，對象的屬性名可以帶引號也可以不帶引號缠沈，屬性的值是標識符,但是如果對象中的 鍵 含有- 則必須給該鍵添加""
    <div id="box3" :class = "{one:true, two:true, three :true}">{{mg}} </div>
    <div id="box4" :class = mm>{{mg}}</div>

<div id='box5' :style='{color:'red',"font-size":'50px'}'>{{msg}}</div>

<div id="box6" :style='style1'>{{mg}} 一個</div>
<div id="box7" :style='[style1,style2]'>{{mg}}多個的時候要通過數(shù)組的方式</div>
知識點鏈接：https://blog.csdn.net/qq_41813695/article/details/80473264?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.nonecase

3.vuex有哪幾種屬性

五種膘壶，state, getters, mutations, actions, modules错蝴。

  1. state：vuex的基本數(shù)據(jù)，用來存儲變量

2. geeter：從基本數(shù)據(jù)(state)派生的數(shù)據(jù)颓芭，相當于state的計算屬性

3. mutation：提交更新數(shù)據(jù)的方法顷锰，必須是同步的(如果需要異步使用action)。每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數(shù) (handler)亡问。

回調函數(shù)就是我們實際進行狀態(tài)更改的地方官紫，并且它會接受 state 作為第一個參數(shù)，提交載荷作為第二個參數(shù)州藕。

4. action：和mutation的功能大致相同束世，不同之處在于 ==》1. Action 提交的是 mutation，而不是直接變更狀態(tài)床玻。 2. Action 可以包含任意異步操作毁涉。

5. modules：模塊化vuex，可以讓每一個模塊擁有自己的state锈死、mutation薪丁、action、getters,使得結構非常清晰馅精，方便管理严嗜。
Vuex的用法：

新建vue項目testApp ==》 在testApp中建store文件 ==》 store文件下又有modules文件夾和getter.js 和 index.js ==》 store文件下建user.js

在項目的main.js中引入 import store from './store'

在store文件下的index.js中引入

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import global from './modules/global'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user
  },
  getters
})

export default store

在store文件下的getters.js中引入

const getters = {
  self: state => state.user.self,
  token: state => state.user.token,
  currentCommunity: (state, getters) => {
    let cid = getters.currentCommunityId
    return getters.communities.filter(item => {
      return item.communityId === cid
    })
  }
}

export default getters

在modules文件下的user.js寫代碼

const user = {
        state:{
            self: null,
            token: '',
        },
        mutations:{
            SET_SELF: (state, self) => {
                 state.self = self
             },
             SET_TOKEN: (state, token) => {
                 state.token = token
             }
        },
        actions:{
             login ({ commit }, res) {
                  commit('SET_SELF', res.self)
                  commit('SET_TOKEN', res.token
            }       
}
export default user

使用下面這兩種方法存儲數(shù)據(jù)：

dispatch：異步操作，寫法： this.$store.dispatch('mutations方法名',值)

commit：同步操作洲敢，寫法：this.$store.commit('mutations方法名',值)

4.在vue.js中實現(xiàn)防止模板渲染時閃爍的方法

在使用vue綁定數(shù)據(jù)的時候漫玄，渲染頁面時會出現(xiàn)變量閃爍

<div id="h_cameraman" v-cloak>

<public-nav>

{{ msg }}

</public-nav>

</div>

加載的時候就會看到 {{msg }}

解決辦法： 給最外層的標簽 加上 v-cloak

css里面：[v-cloak]{

display:none;
　　　　}
ps： 有時候可能沒有用 可能是 [v-cloak]{　display:none;} 的層級被覆蓋掉了 ， 你需要提高它的層級 [v-cloak]{　display:none !important ;} 压彭，也有可能你把它放進了 @import 引入的css文件中 睦优， 它放在@import引入的文件的是沒有作用的，你可以放在link引入的文件來使用壮不，或者直接寫在頁面的<style></style>標簽中汗盘！

5.垂直居中方案？

知識點鏈接：https://blog.csdn.net/weixin_37580235/article/details/82317240?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase

6.清除浮動方案

解決方案一：給前面一個父元素設置高度
　　　　　　
　　　　　⊙弧隐孽！企業(yè)開發(fā)中，能不寫高度就不寫健蕊，所以這種方式用得很少

解決方案二：給后面的盒子添加clear屬性菱阵；
　　　　　　　
　　　　　　缩功！給某個元素添加clear屬性后晴及，這個元素的margin屬性 就會失效


image.png

解決方案三：外墻法，在兩個盒子中間添加一個額外的塊級元素嫡锌，并給這個添加的元素設置clear：both屬性虑稼。

琳钉！可以讓下面的盒子使用margin－ｔｏｐ屬性，但是上面的盒子margin－bottom屬性失效蛛倦；實際使用時可以直接設置添加的塊級元素的高度槽卫，從而讓上下盒子產生邊距。


image.png

image.png

解決方案四：內墻法胰蝠，在第一個盒子所有子元素最后添加一個額外的塊級元素，給這個額外的塊級元素設置clear：both屬性震蒋。
　　　　　　　　
　　　　　　∪兹！可以讓第一個盒子使用margin－bottom屬性查剖，也可以讓第二個盒子使用margin－ｔｏｐ屬性钾虐。　


image.png

此時第一個盒子的高度被撐起笋庄，顯示出了背景色效扫。但由于添加了額外的元素，因此在開發(fā)中不推薦使用這種方式直砂。
解決方案五：利用偽元素添加塊級元素清除浮動
image.png

解決方案六： overflow:hidden; 1.可以將超出標簽范圍的內容裁剪掉
2.清除浮動
3.兩個嵌套的盒子菌仁，可以讓里面的盒子在設置margin-top時，外邊的盒子不被頂下來静暂。

image.png

同時济丘，上面盒子的margin-bottom和下邊盒子的margin-top都可以正常使用。
知識點鏈接：https://www.cnblogs.com/iwilling/p/8485608.html

7.refs和el的用法

知識點鏈接：https://www.cnblogs.com/hope192168/p/11966104.html

8.vuex中store存儲dispatch和commit的區(qū)別

dispatch: 含有異步操作
存儲：

this.$store.dispatch('initUserInfo',friend);
取值：

this.$store.getters.userInfo;
commit:同步操作
存儲：

this.$store.commit('initUserInfo',friend);
取值：

this.$store.state.userInfo;

9.有一個數(shù)組var arr = [22,12,43,56,4]按照降序排序洽蛀，請寫出實現(xiàn)方法

reverse() 降序摹迷，使用 sort() 對數(shù)組排序

function bubbleSort(arr){
for(var i = 0; i < arr.length - 1; i++){
for(var j = 0; j < arr.length - i - 1; j++){
if(arr[j] < arr[j + 1]){
var tmp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = tmp;
}
}
}
}

10.var array=['dog','racecar','car'],請用一個函數(shù)實現(xiàn)查找一下通用的結尾

知識點鏈接：https://blog.csdn.net/zhangwen809877665/article/details/105647513

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市郊供，隨后出現(xiàn)的幾起案子峡碉，更是在濱河造成了極大的恐慌，老刑警劉巖驮审，帶你破解...
    沈念sama閱讀 221,635評論 6贊 515
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件鲫寄，死亡現(xiàn)場離奇詭異，居然都是意外死亡疯淫，警方通過查閱死者的電腦和手機塔拳，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來峡竣，“玉大人靠抑，你說我怎么就攤上這事∈赎” “怎么了颂碧？”我有些...
    開封第一講書人閱讀 168,083評論 0贊 360
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵荠列，是天一觀的道長。 經常有香客問我载城，道長肌似，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 59,640評論 1贊 296
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任诉瓦，我火速辦了婚禮川队，結果婚禮上，老公的妹妹穿的比我還像新娘睬澡。我一直安慰自己固额，他們只是感情好，可當我...
    茶點故事閱讀 68,640評論 6贊 397
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布煞聪。 她就那樣靜靜地躺著斗躏，像睡著了一般。 火紅的嫁衣襯著肌膚如雪昔脯。 梳的紋絲不亂的頭發(fā)上啄糙，一...
    開封第一講書人閱讀 52,262評論 1贊 308
  • 城市分裂傳說
    那天，我揣著相機與錄音云稚，去河邊找鬼隧饼。 笑死，一個胖子當著我的面吹牛静陈，可吹牛的內容都是我干的桑李。 我是一名探鬼主播，決...
    沈念sama閱讀 40,833評論 3贊 421
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼窿给，長吁一口氣：“原來是場噩夢啊……” “哼贵白！你這毒婦竟也來了？” 一聲冷哼從身側響起崩泡，我...
    開封第一講書人閱讀 39,736評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤禁荒，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后角撞，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體呛伴，經...
    沈念sama閱讀 46,280評論 1贊 319
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,369評論 3贊 340
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年谒所，在試婚紗的時候發(fā)現(xiàn)自己被綠了热康。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,503評論 1贊 352
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡劣领，死狀恐怖姐军，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤奕锌，帶...
    沈念sama閱讀 36,185評論 5贊 350
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布著觉，位于F島的核電站，受9級特大地震影響惊暴，放射性物質發(fā)生泄漏饼丘。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 41,870評論 3贊 333
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一辽话、第九天 我趴在偏房一處隱蔽的房頂上張望肄鸽。 院中可真熱鬧，春花似錦油啤、人聲如沸典徘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評論 0贊 24
  • 一樁弒父案村砂，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至屹逛，卻和暖如春础废，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背罕模。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工评腺， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人淑掌。 一個月前我還...
    沈念sama閱讀 48,909評論 3贊 376
  • 代替公主和親
    正文 我出身青樓蒿讥，卻偏偏與公主長得像，于是被迫代替她去往敵國和親抛腕。 傳聞我的和親對象是個殘疾皇子芋绸，可洞房花燭夜當晚...
    茶點故事閱讀 45,512評論 2贊 359