2022-10-28 星期五

你日渐平庸,甘于平庸,将继续平庸。

1. Vue如何监听Vuex的变化 【Vue】

参考答案
  1. 通过 watch 方法监听
const app = createApp({
    watch: {
        '$store.state.counter'() {
        console.log('https://day.liugezhou.online');
        }
    }
})
  1. 使用 vuex 提供的 API:store.subscribe()
store.subscribe((mutation, state) => {
    if (mutation.type === 'add') {
        console.log('counter change in subscribe()!');
    }
})

总结:

  • watch 方式简单好用,且能获取变化前后值,首选;
  • subscribe 方法会被所有 commit 行为触发,因此还需要判断 mutation.type,用起来略繁琐,一般用于 vuex 插件中。

2. 详细解释 React 组件的生命周期方法 【React】

参考答案

一些最重要的生命周期方法是:

  • componentWillMount() – 在渲染之前执行,在客户端和服务器端都会执行。
  • componentDidMount() – 仅在第一次渲染后在客户端执行。
  • componentWillReceiveProps() – 当从父类接收到 props 并且在调用另一个渲染器之前调用。
  • shouldComponentUpdate() – 根据特定条件返回 true 或 false。如果你希望更新组件,请返回true 否则返回 false。默认情况下,它返回 false。
  • componentWillUpdate() – 在 DOM 中进行渲染之前调用。
  • componentDidUpdate() – 在渲染发生后立即调用。
  • componentWillUnmount() – 从 DOM 卸载组件后调用。用于清理内存空间。

3. 微信小程序中的e.target 和 e.currentTarget 有什么区别? 【miniProgram】

参考答案

e.target与e.currentTarget的区别尤其是涉及到页面传值时,特别有用。

  • e.target:触发事件的元素
  • e.currentTarget:绑定事件的元素

简答举例:
有一个父元素绑定了事件,父元素中有A B两个子元素,当我们点击A或者B元素的时候,这个时候e.target指的是A或B,e.currentTarget指的是父元素。

即:

  1. 如果绑定的事件所在组件没有子元素,则用e.target===e.currentTarget一样;
  2. 如果事件绑定在父元素中,且该父元素有子元素,当用e.currentTarget时,不管点击父元素所在区域还是子元素(当前事件),都正确执行,若用e.target时,点击父元素所在区域无错,点击子元素区域,执行报错-------》报错的原因是事件没绑定在子元素上,是在父元素上,子元素要用e.currentTarget才正确!

总之:使用e.target时要注意,e.currentTarget就无所谓了~


4. offsetWidth/offsetHeight,clientWidth/clientHeight 与 scrollWidth/scrollHeight 的区别?【CSS】

参考答案
  • clientWidth/clientHeight 返回的是元素的内部宽度,它的值只包含 content + padding,如果有滚动条,不包含滚动条。 clientTop 返回的是上边框的宽度。 clientLeft 返回的左边框的宽度。

  • offsetWidth/offsetHeight 返回的是元素的布局宽度,它的值包含 content + padding + border 包含了滚动条。 offsetTop 返回的是当前元素相对于其 offsetParent 元素的顶部的距离。 offsetLeft 返回的是当前元素相对于其 offsetParent 元素的左部的距离。

  • scrollWidth/scrollHeight 返回值包含 content + padding + 溢出内容的尺寸。 scrollTop 属性返回的是一个元素的内容垂直滚动的像素数。 scrollLeft 属性返回的是元素滚动条到元素左边的距离。


5.HTML中常⽤的meta标签有哪些 【HTML】

参考答案

meta 标签由 name 和 content 属性定义,用来描述网页文档的属性,比如网页的作者,网页描述,关键词等,除了HTTP标准固定了一些name作为大家使用的共识,开发者还可以自定义name。

  • <meta charset="UTF-8" > : 用来描述HTML文档的编码类型
  • <meta name="keywords" content="关键词" /> : 页面关键字设置
  • <meta name="description" content="页面描述内容" /> : 页面描述设置
  • <meta http-equiv="refresh" content="0;url=" /> : 页面重定向和刷新
  • <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> :适配移动端,可以控制视口的大小和比例:
  • <meta name="robots" content="index,follow" />: content参数有:
    • all:文件将被检索,且页面上的链接可以被查询;
    • none:文件将不被检索,且页面上的链接不可以被查询;
    • index:文件将被检索;
    • follow:页面上的链接可以被查询;
    • noindex:文件将不被检索;
    • nofollow:页面上的链接不可以被查询。