07每周测试

# 每周测试07

# 1、组件之间怎么传递数据？

父传子：propos
子传父：__$emit__
非父子：__eventBus__、依赖注入、__v-bind="$attrs"和v-on="$listeners"、vuex

1
2
3

# 2、vue的生命周期有哪些？

beforeCreate 创造之前
created      创造完毕
beforeMount  安装渲染之前
mounted      渲染完毕
beforeUpdate 更新之前
updated      更新之后
beforeDestroy销毁之前
destroyed    销毁之后
activated    激活被缓存的组件
deactivated   取消激活
errorCaptured 错误捕捉

1
2
3
4
5
6
7
8
9
10
11

# 3、js中call、 apply、 bind有什么区别?

call和apply是返回值，bind是返回函数
call和bind是选项式参数、apply是数组参数

1
2

# 4、使用自定义指令实现节流函数

<div v-mythrottle:click="{ handlerFn: fn, delayTime: 2000 }">节流</div>

directives: {
    mythrottle: {
      inserted(el, binding) {
        let f = binding.value.handlerFn;
        let delayTime = binding.value.delayTime;
        let event = binding.arg;
        function throttle(fn, time) {
          let endTime = 0;
          return function () {
            let nowTime = Date.now();
            if (nowTime - endTime >= time) {
              fn();
              endTime = nowTime;
            }
          };
        }
        let callback = throttle(f, delayTime);
        el.addEventListener(event, callback);
      },
    },
  },
  methods: {
    fn() {
      console.log(123);
    },
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 5、解释浅克隆与深克隆的区别，并列举出实现方法

浅克隆：只克隆对象的第一层属性

深克隆：克隆对象的所有层级的属性

//浅克隆
Object.assign({}, {name: "张三"})
//深克隆
JSON.parse(JSON.stringify())

1
2
3
4

# 6、请用vue代码写出eventBus订阅发布模式案例

<div id="app">
    <my-component1></my-component1>
    <my-component2></my-component2>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script>
    Vue.prototype.$eventBus = new Vue()
    let myComponent1 = {
      template: "<div>组件1<button @click='send'>发送</button></div>",
      data() {
        return {
          msg: '组件1的数据'
        }
      },
      methods: {
        send() {
          this.$eventBus.$emit('myevent', this.msg)
        }
      },
    }
    let myComponent2 = {
      template: '<div>组件2{{msg}}</div>',
      data() {
        return {
          msg: ''
        }
      },
      created() {
        this.$eventBus.$on("myevent", e => {
          this.msg = e
        })
      },
    }
    new Vue({
      el: '#app',
      data: {},
      components: {
        myComponent1,
        myComponent2
      }
    })
  </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# 7、解释一下什么是原型链

当访问一个对象的某个属性时，会先在这个对象本身属性上查找，
如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的__prototype__

1
2

# 8、请写出vuex的核心内容有哪几个？分别有什么功能？

state, getters, mutations, actions, modules
// state   存放数据状态
// getter  计算属性
// mutation同步提交方法，用于更改在state中定义的数据
// actions 异步提交方法，用于异步更改在state中定义的数据
// Module  模块化

1
2
3
4
5
6

# 9、请写出web浏览器缓存机制有哪几种？分别有什么区别

cookie;
    1、最早，兼容性最好
    2、不能直接在谷歌浏览器下操作，只能使用其他浏览器或者在服务器环境操控
    3、存储数据大小（4kb，谷歌浏览器）
    4、存储条数（20条，谷歌浏览器）
    5、操作繁琐（相对于另外两个）
    6、默认关闭浏览器就会消失，如果想要保存需要设置过期时间

localStorage; 本地持久级存储
    1、h5新特性，不能兼容低版本浏览器
    2、默认情况下，永久存储
    3、存储的数据会变成字符串
    4、存储数据大小（5mb，谷歌浏览器）
    5、存储条数（存储条数不限制）
    6、操作相对简单（相对于cookie）

sessionStorage; 本地会话级存储
    1、所有特性都与localStorage一样，只有存储时间不同，sessionStorage默认关闭浏览器就消失

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 10、写出git的下列操作指令

写出git的下列操作指令，克隆、拉取、添加到暂存区、添加到本地git仓库、推送到远程git仓库

克隆：git clone
拉取：git pull
添加到暂存区：git add .
添加到本地仓库：git commit -m "提交信息"
推送到远程仓库：git push

1
2
3
4
5

编辑

上次更新: 2023/08/06, 00:38:41

← 06每周测试《TailwindCSS》→