每日三问之rem与em区别、Vue Set基本用法与使用场景、手写call、apply、bind方法

最新推荐文章于 2024-06-11 01:32:28 发布

WhiteLierTo

最新推荐文章于 2024-06-11 01:32:28 发布

阅读量690

点赞数

本文链接：https://blog.csdn.net/qq_40412456/article/details/121024822

版权

JavaScript 同时被 3 个专栏收录

35 篇文章 0 订阅

订阅专栏

面试题

28 篇文章 0 订阅

订阅专栏

vue

24 篇文章 0 订阅

订阅专栏

rem与em区别

在css中单位长度用的最多的是px、em、rem，这三个的区别是：

px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。
rem中的r意思是root（根源），这也就不难理解了

子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size

<div>
    我是父元素div
    <p>
        我是子元素p
        <span>我是孙元素span</span>
    </p>
</div>

div {
  font-size: 40px;
  width: 10em; /* 400px */
  height: 10em;
  border: solid 1px black;
}
p {
  font-size: 0.5em; /* 20px */ 
  width: 10em; /* 200px */
  height: 10em;
  border: solid 1px red;
}
span {
  font-size: 0.5em;  
  width: 10em;
  height: 10em;
  border: solid 1px blue;
  display: block;
}

巩固测验：你能说出孙元素span的font-size和width吗？

答案：我猜你会说10px、100px，哈哈，其实逻辑上是正确的，但是如果你是chrome浏览器我不得不告诉你应该是12px、120px。因为chrome设置的最小

字体大小为12px，意思就是说低于12px的字体大小会被默认为12px，当然这一尬境可以由css3解决，这里就不多说了。

chrome默认的字体大小是12px，也就是1em默认为12px，如果最外层的父元素直接把font-size设为1.5em，那么该元素的字体大小为18px（12*1.5）。

rem

rem是全部的长度都相对于根元素，根元素是谁？<html>元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

html {
    font-size: 10px;
    }
div {
    font-size: 4rem; /* 40px */
    width: 30rem;  /* 300px */
    height: 30rem;
    border: solid 1px black;
}
p {
    font-size: 2rem; /* 20px */
    width: 15rem;
    height: 15rem;
    border: solid 1px red;
}
span {
    font-size: 1.5rem;
    width: 10rem;
    height: 10rem;
    border: solid 1px blue;
    display: block;
}

Vue Set基本用法与使用场景

基本用法

Vue.set( target, propertyName/index, value )

参数：

{Object | Array} target
{string | number} propertyName/index
{any} value

返回值：设置的值。

var vm =new Vue({
	el:'#app',
	data:{
		items:['a', 'b', 'c']
	},
	methods:{
		btn(){
			Vue.set(this.items, 1, 'e')
			console.log(this.items)
		}
	}
})

使用场景

只有先定义在data 里数据才具有响应式，如果自己后添加的属性是不具备响应式的。

场景1：通过数组的下标去修改数组的值,数据已经被修改了,但是不触发updated函数,视图不更新。

data () {
        return {
            items: ['a', 'b', 'c']
        };
    },
methods: {
    changeItem2 () {
            this.$set(this.items, 0, 'x');
            console.log(222, this.items[0]);
     },
}

场景2: vue中检测不到对象属性的添加和删除。

data() {
     userProfile: {
        name: '小明',
    }
}
addProperty () {
      this.$set(this.userProfile, 'age', '12');
       // { name: '小明', age: '12'}
 }

简单的解释一下原理:

vue在创建实例的时候把data深度遍历所有属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。让 Vue 追踪依赖，在属性被访问和修改时通知变化。所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。
当你在对象上新加了一个属性 newProperty,当前新加的这个属性并没有加入vue检测数据更新的机制(因为是在初始化之后添加的),vue.$set是能让vue知道你添加了属性, 它会给你做处理。

手写call、apply、bind方法

call和apply实现思路主要是：
- 判断是否是函数调用，若非函数调用抛异常
- 通过新对象(context)来调用函数
  - 给context创建一个fn设置为需要调用的函数
  - 结束调用完之后删除fn
bind实现思路
- 判断是否是函数调用，若非函数调用抛异常
- 返回函数
  - 判断函数的调用方式，是否是被new出来的
    - new出来的话返回空对象，但是实例的__proto__指向_this的prototype
- 完成函数柯里化
  - Array.prototype.slice.call()

call

Function.prototype.myCall = function (context) {
      // 先判断调用myCall是不是一个函数
      // 这里的this就是调用myCall的
      if (typeof this !== 'function') {
        throw new TypeError("Not a Function")
      }
 
      // 不传参数默认为window
      context = context || window
 
      // 保存this
      context.fn = this
 
      // 保存参数
      let args = Array.from(arguments).slice(1)   //Array.from 把伪数组对象转为数组
 
      // 调用函数
      let result = context.fn(...args)
 
      delete context.fn
 
      return result
 
    }

apply

Function.prototype.myApply = function (context) {
      // 判断this是不是函数
      if (typeof this !== "function") {
        throw new TypeError("Not a Function")
      }
 
      let result
 
      // 默认是window
      context = context || window
 
      // 保存this
      context.fn = this
 
      // 是否传参
      if (arguments[1]) {
        result = context.fn(...arguments[1])
      } else {
        result = context.fn()
      }
      delete context.fn
 
      return result
    }

bind

Function.prototype.myApply = function (context) {
      // 判断this是不是函数
      if (typeof this !== "function") {
        throw new TypeError("Not a Function")
      }
 
      let result
 
      // 默认是window
      context = context || window
 
      // 保存this
      context.fn = this
 
      // 是否传参
      if (arguments[1]) {
        result = context.fn(...arguments[1])
      } else {
        result = context.fn()
      }
      delete context.fn
 
      return result
    }