前端面试拼图-前端基础(二)

摘要：最近，看了下慕课2周刷完n道面试题，记录下...

1. offsetHeight scrollHeight clientHeight 区别

        计算规则：

        offsetHeight offsetWidth : border + padding + content

        clientHeight clientWidth: padding + content

        scrollHeight scrollWidth: padding + 实际内容尺寸（当显示滚动条时，就大于content尺寸）

2. HTMLCollection 和 NodeList区别

        Node 和Element

        DOM是一棵树，所有的节点都是Node

        Node是Element的基类

        Element是其他HTML元素的基类，如HTMLDivElement

        HTMLCollection是Element的集合；NodeList是Node的集合

        注：获取Node和Element的返回结果可能不一样

        如果elem.childNode和elem.children不一样

        前者包含Text和Comment等节点，后者不包含

        扩展：HTMLCollection和NodeLIst都是类数组，将类数组转换为数组的几种方式

const arr1 = Array.from(list)
const arr2 = Array.prototype.slice.call(list)
const arr3 = [...list]

3. Vue computed和watch的区别

        两者用途不同

        computed 又称计算属性，它提供给开发者根据依赖数据动态生成派生值的计算方式，同时确保计算结果的缓存和更新机制。[1]

import { ref, computed } from 'vue';
const count1 = ref(0);
const count2 = ref(1);
// 创建只读计算属性
const double = computed(() => count1.value * 2);

// 创建可写计算属性
const plusOne = computed({
  get: () => count2.value + 1,
  set: (val) => {
    count2.value = val - 1;
  }
});

// Vue 3的computed函数可以根据计算函数的返回值自动推导类型
console.log(double.value); // 计算属性的值; 推导得到的类型：ComputedRef<number>
plusOne.value = 1; // 设置计算属性的值
console.log(count2.value); // 0

        watch 又称侦听器，开发者可以使用它监视响应式数据的变化，并执行自定义的逻辑。常用语监听多个数据源变化、异步任务和副作用操作。

import { ref, watch } from 'vue';

const count1 = ref(0);
const count2 = ref(0);
const double = ref(0);

// 创建单个数据源的侦听器
watch(count1, (newVal, oldVal) => {
  console.log(`count1变化：新值 - ${newVal}, 旧值 - ${oldVal}`);
});
// 创建多个数据源的侦听器
watch([count2, double], ([newCount, newDouble], [oldCount, oldDouble]) => {
  console.log(`count2变化：新值 - ${newCount}, 旧值 - ${oldCount}`);
  console.log(`double变化：新值 - ${newDouble}, 旧值 - ${oldDouble}`);
});

        此外，Vue 3 还引入了即时执行的侦听器watchEffect ,它无需指定侦听器的数据源。简单比较下这三者。

	自动收集依赖否	返回值	是否可以赋值	立即执行	本质
computed	自动	有	可以	是	class
watch	需指定依赖对象	无	不可以	看参数	function
watcheffect	自动	有	不可以	是	function

4. Vue组件通讯有几种方式，尽量全面

        Vue组件间通讯分为不同场景的：

• 父子组件
• 上下级组件（跨多级）通讯
• 全局组件

        几种组件通讯方式：

props和Event：

        父组件通过 props 向子组件传递数据，子组件通过 events 向父组件发送消息;

<!--Home.vue-->
<template>
  <HelloWorld msg="Welcome to your Vue.js App" @showMsg="showMsg"/>
</template>
<script>
  import HelloWorld from '@/component/HelloWorld.vue'
  export defult {
    name: 'Home',
    components: {
      HelloWorld,
    },
    methods: {
      showMsg(msg) {
        console.log(msg)
      }
    }
  }
</script>

<!--HelloWorld.vue-->
<template>
  <h1 @click="clickHandler"> {{msg}} </h1>
</template>
<script>
  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    emits: ['showMsg'],  // Vue3新增属性
    methods: {
      clickHandler() {
        this.$emit('showMsg', 'hello world')
      }
    }
  }
</script>

自定义事件

        Vue 实例可以通过 $on 方法监听自定义事件，通过 $emit 触发自定义事件，从而实现组件之间的通讯。自定定义事件常用于兄弟组件，跨多级通讯，灵活但容易用乱。

<!--ParentComponent.vue-->
<template>
  <CustomEvent1/>
  <CustomEvent2/>
</template>
<script>
  import CoustomEvent1 from '@/component/CoustomEvent1.vue'
  import CoustomEvent1 from '@/component/CoustomEvent2.vue'
  export defult {
    name: 'Home',
    components: {
      CustomEvent1,
      CustomEvent2
    },
    methods: {
      showMsg(msg) {
        console.log(msg)
      }
    }
  }
</script>

<!--CustomEvent1.vue 接收方-->
<template>
  <p> recive coustom event</p>
</template>
<script>
import event from '../utils/event.js'  //引入event发布订阅的总线
export default {
  name: 'CustomEvent1',
  methods: {
    showMsg(msg) {
      console.log(msg)    
    }
  },
  mounted() {
    event.on('showMsg', this.showMsg)  // 监听
  },
  // vue 2.x beforeDestroy 需要销毁避免内存泄漏
  beforeUnmount() {
    event.off('showMsg', this.showMsg)  // 销毁；监听和销毁要写函数名字，处理同一个函数
  }
}
</script>

<!--CustomEvent2.vue 发送方-->
<template>
  <p><button @click="trigger">trigger coustom event<button></p>
</template>
<script>
import event from '../utils/event.js'  //引入event发布订阅的总线
export default {
  name: 'CustomEvent2',
  methods: {
    trigger() {
      event.emit('showMsg', 'hello coustom event')
    }
  },
}
</script>


//event.js
import ee from 'event-emitter'
// Vue2 : new Vue()就是 event
// Vue3 : 引入第三方库
const event = ee()

export default event

$attrs

        之前资料$attrs 和 $listeners比较多，但是后者在Vue3中已经移除；子组件可以通过 $attrs 获取父组件传递的非 prop 和emits特性。

<!--ParentComponent.vue-->
<template>
  <AttrsDome/>
</template>
<script>
  import AttrsDome from '@/component/AttrsAndListeners/Level1.vue' //主需要引用Level1
  export defult {
    name: 'Home',
    components: {
      AttrsDome,
    },
    methods: {
      showMsg(msg) {
        console.log(msg)
      }
    }
  }
</script>

<!--Level1-->
<template>
  <p>Level1</p>
  <Level2  :a="a" :b="b" :c="c" @getA="getA" @getB="getB" @getC="getC"></Level2>
</template>
<script>
import Level2 from './Level2'
export default {
  name: 'Level1'
  components: {Level2},
  date() {
    return {
      a: 'aaa',
      b: 'bbb',
      c: 'ccc'
    }
  },
  methods: {
    getA(){
      return this.a
    },
    getB(){
      return this.b
    },
    getC(){
      return this.c
    }
  }
}
</script>

<!--Level2-->
<template>
  <p>Level2</p>
  <Level3  :x="x" :y="y" :z="z" @getX="getx" @getY="gety" @getZ="getz"></Level3>
  v-bind="$attrs"  //将attrs传入下一级Level3，
</template>
<script>
import Level3 from './Level3'
export default {
  name: 'Level2'
  components: {Level3},
  // 只接受Level1传入的a和getA
  props: ['a'],   // Vue2中属性在$attrs,方法在$listener中
  emits: ['getA']
  date() {
    return {
      x: 'xxx',
      y: 'yyy',
      z: 'zzz'
    }
  },
  methods: {
    getX(){
      return this.x
    },
    getY(){
      return this.y
    },
    getZ(){
      return this.z
    }
  },
  created() {
    console.log('level2', Object.keys(this.$attrs))  // ['b', 'c','onGetB', 'onGetC']
    // 也就是说，Level1传入的属性，没有被包含在props和$emits，就会放在attrs中;是前两者的后补
  }
}
</script>

<!--Level3-->
<template>
  <p>Level3</p>
</template>
<script>
export default {
  name: 'Level3',
  // 只接受Levelx传入的a和getX
  props: ['x'],
  emits: ['getX']
  inheritAttrs: false,// 避免属性继承
  date() {
    return {
  
    }
  },
  mounted() {
    console.log('Level3 $attrs', Object.keys(this.$attrs))//['y','z','onGetY','onGetZ']
    // Level2中增加v-bind传入attrs后，上面输出为['y','z','onGetY','onGetZ','b', 'c','onGetB', 'onGetC']
  }
}
</script>

$parent和 $refs

        Vue2中可以通过 $parent 和 children 直接访问父组件和子组件的实例，进行直接的组件通讯(父子组件通讯)；Vue3中children建议用$refs来获取，可以使用 $refs 获取对子组件实例的引用，从而直接调用子组件的方法或访问子组件的数据。

        上例子中Level3，可以通过$parent直接获取父节点，获取属性调用方法都可以；

<!--Level3-->
<template>
  <p>Level3</p>
  <!--添加子组件HelloWorld的ref属性，为读取是的名称-->
  <HelloWorld msg="hello czh" ref="hello1"/>
</template>
<script>
import HelloWorld from '../HelloWorld'

export default {
  name: 'Level3',
  components: {HelloWorld},
  // 只接受Levelx传入的a和getX
  props: ['x'],
  emits: ['getX']
  inheritAttrs: false,// 避免属性继承
  date() {
    return {
  
    }
  },
  mounted() {
    console.log(this.$parent)  //父节点
    console.log(this.$parent.y)   //yyy   ，获取属性
    console.log(this.$parent.getX())   //xxx   ，调用方法
    console.log(this.refs.hello1.name)  // hello-world
  }
}
</script>

<!--HelloWorld.vue-->
<template>
  <h1 @click="clickHandler"> {{msg}} </h1>
</template>
<script>
  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    emits: ['showMsg'],  // Vue3新增属性
    data() {    // 新增data中的name属性
      return {
        name: 'hello-world'
      }
    },
    methods: {
      clickHandler() {
        this.$emit('showMsg', 'hello world')
      }
    }
  }
</script>

        需要注意$parent 和 $refs获取父组件和子组件，需要在mounted中获取，因为created中组件还未渲染完成。

provide/inject

        provide/inject是多层级组件间通讯较完美的解决方案，父组件通过 provide 向子孙组件注入数据，子孙组件通过 inject 接收注入的数据(可以跨级接收注入的数据)。

<!--Level1-->
<template>
  <p>Level1 :<input v-model=name></p>
  <Level2></Level2>
</template>
<script>
import {computed} from 'vue'  // 传入data中响应式的数据需要使用computed包裹
import Level2 from './Level2'
export default {
  name: 'Level1'
  components: {Level2},
  date() {
    return {
     name: 'czh'
    }
  },
  // provide: {    // 传入数据为静态字符串
  //   info: 'aaa'
  // },
  provide () {   //传入data中响应式的数据
    return {
      info: computed(() => this.name)  // 使用computed包裹
    }
  }
}
</script>

<!--Level2-->
<template>
  <p>Level2  {{info}}</p>   <!--使用注入的数据info-->
  <Level3></Level3>
</template>
<script>
import Level3 from './Level3'
export default {
  name: 'Level2'
  components: {Level3},
  inject: ['info'],   // 接收注入的数据
}
</script>

<!--Level3-->
<template>
  <p>Level3 {{info}}</p>   <!--使用注入的数据info-->
</template>
<script>
export default {
  name: 'Level3',
  inject: ['info'],   // 接收注入的数据
}

Vuex

        使用 Vuex 来进行状态管理，实现组件之间共享状态和通信。

5. Vuex 中mutation和action的区别

        mutation：原子操作，必须是同步代码；action: 可包含多个mutation，可包含异步代码；

         具体来说：

        mutation：

• mutation 是 Vuex 中用于修改状态的唯一途径；
• mutation 必须是同步函数，用于直接改变状态；
• 在组件中通过 commit 方法来触发 mutation；
• 由于 mutation 是同步执行的，因此可以更容易地追踪状态的变化和调试。

        action：

• action 类似于 Mutation，但是可以包含任意异步操作；
• action 可以包含业务逻辑、异步请求等操作，并且最终提交 mutation 来修改状态；
• 在组件中通过 dispatch 方法来触发 action；
• action 可以处理复杂的逻辑，例如异步请求、多个 mutation 的组合等。

6. JS严格模式有什么特点

        JavaScript 的严格模式（Strict Mode）是一种在 ECMAScript 5 中引入的特性，它对 JavaScript 解析和执行时的行为做了一些限制和改变。使用严格模式可以帮助开发者写出更加安全、规范的 JavaScript 代码开启严格模式：

'use strict'  //全局开启

function fn() {
  'use strict' // 某个函数开启
}

特点：

        全局变量必须先声明

'use strict'
m = 10;   //Uncaught ReferenceError: m is not defined

        禁止使用with

'use strict'
const obj = {x:100, y:200}
with(obj) {
  console.log(x, y)    // Strict mode code may not include a with statement
}

        创建eval作用域(eval有自己单独的作用域, 不推荐使用)

'use strict'
var x = 10;
eval(`var x = 20; console.log('in eval', x);`)
console.log('out eval', x);

        禁止this指向window

'use strict'
function fn() {
  console.log('this', this)   // undefined
}
fn()

        函数参数不能重名

'use strict'
function fn(x,x,y) {  // Duplicate parameter name not allowed in this context
}
fn(10,10,20)

7. HTTP跨域时为何要发送option请求

        跨域请求是由于浏览器存在同源策略；

        同源策略一般限制Ajax网络请求，不能跨域请求sever

        不会限制<link> <img><script><iframe>加载第三方资源

        JSONP

        执行原理：利用<script>标签不存在跨域限制，aaa跨域请求bbb的接口。首先，定义全局函数onSuccess， 并将src设置为bbb接口（需要接口配合），这样可以获取bbb接口返回的字符串，该字符串将被作为js执行，调用onSuccess获取接口返回的数据

<!--www.aaa.com-->
<script>
  window.onsuccess = function (date) {
    console.log(data)
  }
</script>
<script src = "https://www.bbb.com/api/getData"></script>


//https://www.bbb.com/api/getData返回了一段字符串：
'onSuccess({erroeno:0, data:{/*数据内容*/}})'

        CORS

// CORS配置允许跨域（服务端）
response.setHeader("Access-Control-Allow-Origin", "允许跨域请求的地址") // 或者'*'
resopnse.setHeader("Access-Control-Allow-Headers", "X-Request-With")
resopnse.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS")
resopnse.setHeader("Access-Control-Allow-Credentials", "true")   //允许跨域接受Cookie

        Options请求（预检请求）的主要目的是为了实现跨域资源共享（CORS）机制的安全性和规范性；

        通过预检请求可以检查服务器是否支持跨域请求、验证请求的安全与否、处理复杂请求（如带有自定义头部，非简单请求方法PUT DELETE或者需要身份认证）、有助于防止跨站点请求伪造（CSRF）等安全问题。

        Options请求浏览器自行发起，无需干涉，也不会影响实际的功能。

[1] 解锁Vue 3的神秘力量：深入理解computed和watch： https://juejin.cn/post/7308563909560549391?searchId=20240228083853714901F13DB2C63CCF19