2020.7.1广州某博公司

作者: 南方小成 | 来源:发表于2020-07-01 19:54 被阅读0次

1.简单说下setTimeout(fn,0)中的0代表的是什么？如果我想在vue实现功能可以用什么方法代替？

答： JavaScript 是单线程执行的，也就是无法同时执行多段代码。当某一段代码正在执行的时候，所有后续的任务都必须等待，形成一个队列，一旦当前任务执行完毕，再从队列中取出下一个任务。这也常被称为 “阻塞式执行”。
setTimeout(fn,0)： 这个时间设为 0，就代表立即插入队列，但不是立即执行，仍然要等到主线程把"任务队列"现有的事件都处理完，才会得到执行。所以 setTimeout 并不能保证执行的时间，是否立即执行，取决于 JavaScript 线程是拥挤还是空闲。
在某种程度上，我们可以利用setTimeout(fn,0)的特性，修正浏览器的任务顺序。

console.log(1); 
setTimeout(function(){
    console.log(2); 
}, 0); 
console.log(3); 
执行j结果为：1，3，2

vue异步更新队列：https://www.jianshu.com/p/19efc25e2a57

2.用vue实现样式绑定，可以用class或者内联样式，最少写出2个？

1. 绑定class–对象语法
为v-bind:class设置一个对象，可以动态切换class：

<!-- 绑定class-对象语法 -->
<body>
    <div id="app">
        <!-- 类active依赖于数据isActive，当其为true时，div拥有类名Active -->
        <div :class="{'active': isActive}"></div>
        
        <!-- 对象中也可以传入多个属性，动态切换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–数组语法
当需要应用多个class时，可以使用数组语法，给:class绑定一个数组，应用一个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. 绑定内联样式
使用:style可以给元素绑定内联样式，与:class类似，也有对象语法和数组语法。

内联样式，跟一般css添加样式相似，多了一个绑定，样式添加通过数组方式，数组中以字符串显示
<div id='box' :class="['one','two']">{{msg}}</div>
数组中添加三元表达式，只有为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}}多个的时候要通过数组的方式</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。

state：vuex的基本数据，用来存储变量

2. geeter：从基本数据(state)派生的数据，相当于state的计算属性

3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。

回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 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

使用下面这两种方法存储数据：

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

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

4.在vue.js中实现防止模板渲染时闪烁的方法

在使用vue绑定数据的时候，渲染页面时会出现变量闪烁

<public-nav>

</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.清除浮动方案

解决方案一：给前面一个父元素设置高度
　　　　　　
　　　　　　！企业开发中，能不写高度就不写，所以这种方式用得很少

解决方案二：给后面的盒子添加clear属性；
　　　　　　　
　　　　　　！给某个元素添加clear属性后，这个元素的margin属性就会失效

image.png

解决方案三：外墙法，在两个盒子中间添加一个额外的块级元素，并给这个添加的元素设置clear：both属性。

！可以让下面的盒子使用margin－ｔｏｐ属性，但是上面的盒子margin－bottom属性失效；实际使用时可以直接设置添加的块级元素的高度，从而让上下盒子产生边距。

image.png

解决方案四：内墙法，在第一个盒子所有子元素最后添加一个额外的块级元素，给这个额外的块级元素设置clear：both属性。
　　　　　　　　
　　　　　　　！可以让第一个盒子使用margin－bottom属性，也可以让第二个盒子使用margin－ｔｏｐ属性。　

image.png
此时第一个盒子的高度被撑起，显示出了背景色。但由于添加了额外的元素，因此在开发中不推荐使用这种方式。
解决方案五：利用伪元素添加块级元素清除浮动

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的区别

dispatch: 含有异步操作
存储：

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

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

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

this.$store.state.userInfo;

9.有一个数组var arr = [22,12,43,56,4]按照降序排序，请写出实现方法

reverse() 降序，使用 sort() 对数组排序

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'],请用一个函数实现查找一下通用的结尾

知识点链接：https://blog.csdn.net/zhangwen809877665/article/details/105647513

2020.7.1广州某博公司
1.简单说下setTimeout(fn,0)中的0代表的是什么？如果我想在vue实现功能可以用什么方法代替？答：...
2020.7.1
1.控制支出，收入大于支出钱包会越来越鼓。 2.不断提升认知，认知和能力挂钩，人无法挣到认知以上的钱。认知提升也...
2020.7.1
2020年下半年的第一天，我也开启了自己新的人生旅程。凌晨三点在酒精的麻痹下进入梦乡，也许是心有事儿想，六点不到...
2020.7.1
func configUI(){ /* 七月杭州阴雨天, 今年已过半, 公司...
2020.7.1
2020年过去一半了，这个六月，我32岁，妈咪56岁了。一旦提起时间，几乎每个人都会感叹光阴易逝，不...
2020.7.1
转眼之间，2020年的上半年就要悄然离去。时间是什么？时间是这个世上最无情的存在，它带走了所有你在乎的东西，但同样...
2020.7.1
蚊痴情相守，对吾不离不弃，吾不堪其扰，难以入眠，遂伺机灭之，然其亡魂音犹在耳，吾仍不得眠，呜呼，其若尘之躯已然胜吾...
2020.7.1
2020.7.1 美好的七月如约而至最近真的是太忙了，从端午节到现在一直忙个不停，每天钱脚打后脑勺，有时还加班...
2020.7.1
再过几天又长大一岁每天都要进步一点少一点没关系要比昨天多一点就可以背书不...
2020.7.1
我喜欢晴天，明媚的阳光似乎能照进入心底，于是相比于栖于暗室更倾向于曝晒与旷野，仿佛充满力量，去感受自然之美，去经历...

2020.7.1广州某博公司

1.简单说下setTimeout(fn,0)中的0代表的是什么？如果我想在vue实现功能可以用什么方法代替？

2.用vue实现样式绑定，可以用class或者内联样式，最少写出2个？

3.vuex有哪几种属性

4.在vue.js中实现防止模板渲染时闪烁的方法

5.垂直居中方案？

6.清除浮动方案

7. $refs和$ el的用法

8.vuex中store存储dispatch和commit的区别

9.有一个数组var arr = [22,12,43,56,4]按照降序排序，请写出实现方法

10.var array=['dog','racecar','car'],请用一个函数实现查找一下通用的结尾

相关文章