1、定义filter()创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。2、语法array.filter(function(currentValue,index,arr), thisValue);3、参数说明返回4、用法filter() 方法用于把Array中的某些元素过滤掉，然后返回剩下的未被过滤掉的元素。5、注意事项1、filter() 不会对空数组进行检测；2、filter() 不会改变原始数组。6、使用实例1.返回数组array中所有元素都大于等于14的元素、返回等于14、返回大于某个值和小于某个值的元素的元素。const array = [14, 17, 18, 32, 33, 16, 40]; const newArr = array.filter(num => num > 14) console.log(newArr);//打印 [17,18,32,33,16,40] // 查找某个值------------------------- const array = [14, 17, 18, 32, 33, 16, 40]; const newArr = array.filter(num => num == 14) console.log(newArr);//打印 [14] //返回大于某个值和小于某个值的元素 const array = [14, 17, 18, 32, 33, 16, 40]; const newArr = array.filter(num => num > 14 && num < 33) console.log(newArr);//打印 [17, 18, 32, 16]2.数组去重操作：对数组array中所有相同的元素进行去重复操作。const array = [2, 2, 'a', 'a', true, true, 15, 17] const newArr = array.filter((item, i, arr) => { return arr.indexOf(item) === i }) console.log(newArr);//打印 [2, 'a', true, 15, 17] //------------------------------------------------------------------------- const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 4, 5, 6, 7, 9,] const newArr = array.filter((item, i, arr) => { return arr.indexOf(item) === i }) console.log(newArr);// 打印 [1, 2, 3, 4, 5, 6, 7, 8, 9]3、数组中保留奇数或者偶数。//保留偶数---------------------------------------- const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] const newArr = array.filter((item, i, arr) => { return item % 2 === 0 }) console.log(newArr);// 打印 [2, 4, 6, 8, 10] //保留奇数---------------------------------------- const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] const newArr = array.filter((item, i, arr) => { return item % 2 !== 0 }) console.log(newArr);// 打印 [1, 3, 5, 7, 9]4、去掉数组中的假值，比如：空字符串、undefined、null、0、false。const array = [ { id: 3 }, { id: 4 }, { id: null }, { id: undefined }, { id: '' }, { id: 0 }, { id: false } ] const newArr = array.filter(({ id }) => id) console.log(newArr);// 打印 [{ "id": 3 },{ "id": 4 }] //------------------------------------------------------------------- const array = [undefined, null, 3, 5, 'a', false, 0] const newArr = array.filter(item => item) console.log(newArr);// 打印 [3, 5, 'a']5、把对象数组array中的某个属性值取出来存到数组newArr中。const array = [ { name: "a", type: "letter" }, { name: '1', type: "digital" }, { name: 'c', type: "letter" }, { name: '2', type: "digital" }, ]; const newArr = array.filter((item, i, arr) => { return item.type === "letter" }) console.log(newArr); // 打印 [{ "name": "a", "type": "letter" }, { "name": "c", "type":"letter" }]6、filter结合find方法，实现两个数组的补集的解决方法，oldArr的元素newArr中都有，在newArr中去掉所有的oldArr。find() 方法返回数组中满足提供的测试函数的第一个元素的值。这里有四个元素，那么就会返回两个数组元素相等的值，这里取反就返回不相等的值， 不取反的时候因为30的元素不符合，所以不返回30的值。const array = [32, 4, 11, 55, 46, 99, 104, 54, 16, 33, 78, 43, 40] const oldArr = [32, 33, 16, 40, 30] function myfunction() { const result = array.filter(item1 => { //此处取反去掉，将变换元素状态 return !oldArr.find(item2 => { return item1 === item2 }) }) return result } const newArr = myfunction() console.log(newArr); // 取反打印 [4, 11, 55, 46, 99, 104, 54, 78, 43] // 不取反打印 [32, 16, 33, 40] 此处30的元素不符合，所以不返回30的值原文链接：https://blog.csdn.net/a15220216758/article/details/124993673

JS数组去重的方式例：将下面数组去除重复元素（以多种数据类型为例）const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]1.利用Set()+Array.from()Set对象：是值的集合，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即Set中的元素是唯一的。Array.from() 方法：对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。const result = Array.from(new Set(arr)) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]注意：以上去方式对NaN和undefined类型去重也是有效的，是因为NaN和undefined都可以被存储在Set中， NaN之间被视为相同的值（尽管在js中：NaN !== NaN）。2.利用两层循环+数组的splice方法通过两层循环对数组元素进行逐一比较，然后通过splice方法来删除重复的元素。此方法对NaN是无法进行去重的，因为进行比较时NaN !== NaN。function removeDuplicate(arr) { let len = arr.length for (let i = 0; i < len; i++) { for (let j = i + 1; j < len; j++) { if (arr[i] === arr[j]) { arr.splice(j, 1) len-- // 减少循环次数提高性能 j-- // 保证j的值自加后不变 } } } return arr } const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN, NaN ]3.利用数组的indexOf方法新建一个空数组，遍历需要去重的数组，将数组元素存入新数组中，存放前判断数组中是否已经含有当前元素，没有则存入。此方法也无法对NaN去重。indexOf() 方法：返回调用它的String对象中第一次出现的指定值的索引，从 fromIndex 处进行搜索。如果未找到该值，则返回 -1。function removeDuplicate(arr) { const newArr = [] arr.forEach(item => { if (newArr.indexOf(item) === -1) { newArr.push(item) } }) return newArr // 返回一个新数组 } const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN, NaN ]4.利用数组的includes方法此方法逻辑与indexOf方法去重异曲同工，只是用includes方法来判断是否包含重复元素。includes()方法：用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。function removeDuplicate(arr) { const newArr = [] arr.forEach(item => { if (!newArr.includes(item)) { newArr.push(item) } }) return newArr } const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]注意：为什么includes能够检测到数组中包含NaN，其涉及到includes底层的实现。如下图为includes实现的部分代码，在进行判断是否包含某元素时会调用sameValueZero方法进行比较，如果为NaN，则会使用isNaN()进行转化。具体实现可参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes简单测试includes()对NaN的判断：const testArr = [1, 'a', NaN] console.log(testArr.includes(NaN)) // true5.利用数组的filter()+indexOf()filter方法会对满足条件的元素存放到一个新数组中，结合indexOf方法进行判断。filter() 方法：会创建一个新数组，其包含通过所提供函数实现的测试的所有元素。function removeDuplicate(arr) { return arr.filter((item, index) => { return arr.indexOf(item) === index }) } const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined ]注意：这里的输出结果中不包含NaN，是因为indexOf()无法对NaN进行判断，即arr.indexOf(item) === index返回结果为false。测试如下：const testArr = [1, 'a', NaN] console.log(testArr.indexOf(NaN)) // -16.利用Map()Map对象是JavaScript提供的一种数据结构，结构为键值对形式，将数组元素作为map的键存入，然后结合has()和set()方法判断键是否重复。Map 对象：用于保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者原始值）都可以作为一个键或一个值。function removeDuplicate(arr) { const map = new Map() const newArr = [] arr.forEach(item => { if (!map.has(item)) { // has()用于判断map是否包为item的属性值 map.set(item, true) // 使用set()将item设置到map中，并设置其属性值为true newArr.push(item) } }) return newArr } const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]注意：使用Map()也可对NaN去重，原因是Map进行判断时认为NaN是与NaN相等的，剩下所有其它的值是根据 === 运算符的结果判断是否相等。7.利用对象其实现思想和Map()是差不多的，主要是利用了对象的属性名不可重复这一特性。function removeDuplicate(arr) { const newArr = [] const obj = {} arr.forEach(item => { if (!obj[item]) { newArr.push(item) obj[item] = true } }) return newArr } const result = removeDuplicate(arr) console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]原文链接：https://blog.csdn.net/qq_52732369/article/details/121877897

创作场景   记录闭包的博客中有一个节流函数的实际用法和这个知识点相关，创作过程中发现这个知识点涉及到的还有很多，在此记录一下相关的所有知识点并进行比较。阅读前提   此博客适用于所有人群，不仅有基础的用法，同时也对多种实现方式进行比较，本文将围绕一个例子进行讲解，并对涉及到的所有知识点进行穿插，最后进行总结。提前了解的知识点1. 页面可视化高度（clientHeight）   页面可视化高度指的是你当前页面能看到内容的高度，这个高度是可以动态变化的，比如你打开了F12调试器，那么你的可视化高度就会变化，如果你将浏览器最大化，那么你的可视化高度也会变化，但这并不代表你实际页面的高度，可能你的页面高度会远远超过页面可视化高度。代码实现：document.body.clientHeight2. 滚动条高度（scrollHeight）   滚动条高度就是当你的页面高度超过了页面可视化高度，比如body的高度是900，你的页面高度是800，那么滚动条就会产生，一般来说，滚动条高度是比你的页面高度要大16px，可能不同设备会不一样。代码实现：document.body.scrollHeight统计距离页面顶部的距离参考：https://blog.csdn.net/mouday/article/details/125444003 // 滚动方向枚举值 const DIRECTION_ENUM = { DOWN: "down", UP: "up", }; // 距离顶部或底部的阈值，一般滚动条高度是要比页面高度大的，阈值指的就是大的这一点儿 const threshold = 20; // 记录前一个滚动位置 let beforeScrollTop = 0; function handleScroll() { // 距顶部 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset || window.scrollY; // 可视区高度 var clientHeight = document.documentElement.clientHeight || document.body.clientHeight; // 滚动条总高度 var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; // 打印数值，console.table是控制台打印表格的写法，同时也有 // console.error和console.warn，对应警告和错误 // 一般使用的就是console.info console.table([ { label: "距顶部", value: scrollTop, }, { label: "可视区高度", value: clientHeight, }, { label: "滚动条总高度", value: scrollHeight, }, { label: "距顶部 + 可视区高度", value: scrollTop + clientHeight, }, ]); // 确定滚动方向 let direction = DIRECTION_ENUM.DOWN; if (beforeScrollTop > scrollTop) { direction = DIRECTION_ENUM.UP; } // 通过滚动方向判断是触底还是触顶 if (direction == DIRECTION_ENUM.DOWN) { // 滚动触底 if (scrollTop + clientHeight + threshold >= scrollHeight) { console.log("滚动触底"); } } else { // 滚动到顶部 if (scrollTop <= threshold) { console.log("滚动到顶部"); } } beforeScrollTop = scrollTop; } window.addEventListener('scroll', handleScroll)window、document、documentElement的区别window是当前页面的顶级对象，其中包含了很多属性和方法，是一个BOM对象，可进行浏览器的交互。document是window对象的子元素，它可以理解为一个DOM对象，其中有很多方法和属性，主要是在页面元素中进行交互。documentElement是document的子元素，注意，这是一个只读对象，也就是说它只能读取元素的属性，不能对元素进行操作。一般他就是你本页面的HTML元素。这里一定要注意一下，如果你的页面是在一个iframe中，那你获取的一定是你iframe中的所有元素，并不是你最大页面的对象。一般在实际开发中都有头部导航栏，而子页面中也会嵌套子页面，那么获取最外部的HTML元素可以用parent对象，一层一层循环，因为最外部的iframe肯定是有一个ID的，这是我在开发中遇到的一个小问题，分享一下。// 第一个参数是当前的iframe对象，第二个是parent对象 // 调用时parentNode不用传入 function getFrameTop(frame, parentNode) { if (frame.attr('id') !== "iframeContent") { if (parentNode) { frame = parentNode.parent.$("iframe") } else { frame = parent.$("iframe") } getFrameTop(frame, parent) } else { topIframe = frame return frame } }解读获取距离页面顶部距离的四种方式 // 距顶部 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset || window.scrollY;  这四种拆分下来就是在两个对象上进行操作的，一个是window，一个是document，而之所以这么写完全是为了兼容性，尤其是pageYOffset方法，这是一个过时方法，但是在某些IE就只能识别这个，如果你的产品不需要兼容，那其中一个就够用了。   解读一下原理：   我的div高度是900，页面可视化高度是818，而距离顶部的距离（scrollTop）是98，这其实就是滚动条的高度减去可视区高度算出来的，而这个高度指的是你的div最顶部距离和你可视化页面的顶部距离，如果是计算底部的距离，那加上页面可视化距离即可。如何使用代码滚动页面（四种方式）1. scroll()方法滚动窗口至文档中的特定位置。window.scroll(x, y) x和y就是你需要滚动的绝对位置坐标window.scroll(options) options是一个对象，包含x、y坐标，同时也有滚动的方式window.scroll({ top: 100, left: 100, behavior: "smooth", });   上面这是一种标准用法，当然一般我们不这么写，直接用第一种方式滚动即可。2. scrollBy()方法在窗口中按指定的偏移量滚动文档（比如你只是想在这个基础上向下滚动100px）scrollBy(x-coord, y-coord)scrollBy(options)x-coord 是你想滚动的水平像素值。y-coord 是你想滚动的垂直像素值。options   包含以下参数的字典top   指定沿 Y 轴滚动窗口或元素的像素数。left   指定沿 X 轴滚动窗口或元素的像素数。behavior   指定滚动是否应该平滑（smooth）、瞬时运动到该位置（instant）、或者让浏览器选择（auto，默认）。window.scrollBy({ top: 100, left: 100, behavior: "smooth", });   这个方法和scroll区别在于，这里的x和y指的是偏移量，而不是绝对位置。3. scrollTo()   这个和scroll方法是一样的，个人比较喜欢这种方式，因为可读性比较高，不容易出错，使用标准写法可以随意在x和y上进行随意滚动，因为对象上参数可选。// 设置滚动行为改为平滑的滚动 window.scrollTo({ top: 1000, behavior: "smooth" });4. document.documentElement.scrollTop = 0（非标准写法）   上面说过documentElement是一个只读属性，官方上也是这么说的，但是经过实验发现这种方式也可以用来操作页面的滚动，但不建议这么使用，也不知道会存在什么bug。使用节流函数优化关于节流函数是什么，这个博客中有说明节流函数（闭包中的使用） function throttle(func, wait){ let previous = 0; return function() { var now = Date.now() var context = this // ES5写法：var args = []; args.push.apply(null, arguments) var args = [...arguments] // ES6数组解构知识点：复制数组 // 如果当前时间减去上一次执行时间大于我们执行函数的时间间隔再执行 if(now - previous > wait){ func.apply(context, args); // 闭包，记录本次执行时间戳 // 这么写就是不用将上次执行的时间作为参数传给函数了 // 就算多次调用闭包不会消失，上一次执行时间不会消失，这就是闭包的常用方式 previous = now; } } } // 滚动方向枚举值 const DIRECTION_ENUM = { DOWN: "down", UP: "up", }; // 距离顶部或底部的阈值，一般滚动条高度是要比页面高度大的，阈值指的就是大的这一点儿 const threshold = 20; // 记录前一个滚动位置 let beforeScrollTop = 0; function handleScroll() { // 距顶部 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset || window.scrollY; // 可视区高度 var clientHeight = document.documentElement.clientHeight || document.body.clientHeight; // 滚动条总高度 var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; // 打印数值 console.table([ { label: "距顶部", value: scrollTop, }, { label: "可视区高度", value: clientHeight, }, { label: "滚动条总高度", value: scrollHeight, }, { label: "距顶部 + 可视区高度", value: scrollTop + clientHeight, }, ]); // 确定滚动方向 let direction = DIRECTION_ENUM.DOWN; if (beforeScrollTop > scrollTop) { direction = DIRECTION_ENUM.UP; } // 通过滚动方向判断是触底还是触顶 if (direction == DIRECTION_ENUM.DOWN) { // 滚动触底 if (scrollTop + clientHeight + threshold >= scrollHeight) { console.log("滚动触底"); } } else { // 滚动到顶部 if (scrollTop <= threshold) { console.log("滚动到顶部"); } } beforeScrollTop = scrollTop; } // window.addEventListener('scroll', handleScroll) window.addEventListener('scroll', throttle(handleScroll, 200)) 这里只是一个例子，请注意，如果想要绝对精度，也就是当滚动条快速滑动的时候也要监听到，那就将延迟设置为0-50内。总结获取距离顶部的距离document.documentElement.scrollTopdocument.body.scrollTopwindow.pageYOffsetwindow.scrollY可视区高度document.documentElement.clientHeightdocument.body.clientHeight滚动条总高度document.documentElement.scrollHeightdocument.body.scrollHeight滚动页面scroll()scrollTo()scrollBy()document.documentElement.scrollY = 100原文链接：https://blog.csdn.net/weixin_48588897/article/details/138413621

前言在理解浅拷贝和深拷贝浅前，必须先理解基本数据类型和引用数据类型的区别。一、数据类型1.1.基本数据类型字符串（Sring）、布尔值（Boolean）和数字（Number）1.2.引用数据类型数组（Array）和对象（Object）1.3.区别基本数据类型是存储在栈内存中。而引用类型存放的值是指向数据的引用，而不是数据本身，真实数据是存放在堆内存里，具体见如下：二、浅拷贝2.1. 定义浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址 ，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。即默认拷贝构造函数只是对对象进行浅拷贝复制(逐个成员依次拷贝)，即只复制对象空间而不复制资源。2.2. 浅拷贝特点对于基本数据类型的成员对象，因为基础数据类型是值传递的，所以是直接将属性值赋值给新的对象。基础类型的拷贝，其中一个对象修改该值，不会影响另外一个。var a = 10 var b = a b = 20 console.log("a",a) //10 console.log("b",b) //20对于引用类型，比如数组或者类对象，因为引用类型是引用传递，所以浅拷贝只是把内存地址赋值给了成员变量，它们指向了同一内存空间。改变其中一个，会对另外一个也产生影响var obj = { a:"AAA" } var obj2 = obj obj2.a = "BBB" console.log("obj",obj) //{name: "BBB"} console.log("obj2",obj2) //{name: "BBB"}三、深拷贝3.1. 定义深拷贝，在拷贝引用类型成员变量时，为引用类型的数据成员另辟了一个独立的内存空间，实现真正内容上的拷贝。3.2. 深拷贝特点对于基本数据类型的成员对象，因为基础数据类型是值传递的，所以是直接将属性值赋值给新的对象。基础类型的拷贝，其中一个对象修改该值，不会影响另外一个（和浅拷贝一样）。对于引用类型，比如数组或者类对象，深拷贝会新建一个对象空间，然后拷贝里面的内容，所以它们指向了不同的内存空间。改变其中一个，不会对另外一个也产生影响。var obj = { a:"AAA" } var obj2 = {} // 创建新的对象 obj2 = obj obj2.a = "BBB" console.log("obj",obj) //{name: "AAA"} console.log("obj2",obj2) //{name: "BBB"}四、拷贝实现方案4.1. Object.assign()单级结构时深拷贝，多级结构浅拷贝，Object.assign()对象是用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，将返回目标对象。a）单级结构（一级拷贝是深拷贝）：var obj = { a: 10, } var obj2 = Object.assign({}, obj); obj2.a = 20 console.log("obj",obj); //{a: 10} console.log("obj2",obj2) //{a: 20}b）多级结构（一级拷贝是浅拷贝，修改二级对象还是会影响原对象）：var obj = { a: 10, b: { c:"AAA", d:666 } } var obj2 = Object.assign({}, obj); obj2.b.c = "BBB" console.log("obj",obj); //{a: 10,b: {c:"BBB",d:666}} console.log("obj2",obj2); //{a: 10,b: {c:"BBB",d:666}}4.2. concat()单级结构时深拷贝，多级结构浅拷贝a）单级结构（一级拷贝是深拷贝）：let arr = [1, 2]; let arr2 = arr.concat(); arr2[1] = 3; console.log("arr",arr) //[1, 2] console.log("arr2",arr2) //[1, 3]b）多级结构（一级拷贝是浅拷贝）：let arr = [1, 2, { a: 'AAA' }]; let arr2 = arr.concat(); arr2[2].a = 'BBB'; console.log("arr",arr) //[1, 2, {a: 'BBB'}] console.log("arr2",arr2) //[1, 2, {a: 'BBB'}]4.3. slice()单级结构时深拷贝，多级结构浅拷贝a）单级结构（一级拷贝是深拷贝）：let arr = [1, 2, 3]; let arr2 = arr.slice(); arr2[1] = 4; console.log("arr",arr) //[1, 2, 3] console.log("arr2",arr2) //[1, 4, 3]b）多级结构（一级拷贝是浅拷贝）：let arr = [1, 2, {a:'AAA'}]; let arr2 = arr.slice(); arr2[2].a = 'BBB'; console.log("arr",arr) //[1, 2, {a: 'BBB'}] console.log("arr2",arr2) //[1, 2, {a: 'BBB'}]4.4.JSON.parse(JSON.stringify())用JSON.stringify将对象转成JSON字符串，再用JSON.parse()把字符串解析成对象，一去一来，新的对象产生了，而且对象会开辟新的栈，实现深拷贝。单级多级均为深拷贝，但需要注意无法拷贝RegExp对象、function和symbollet arr = [1, 2, {a:'AAA'}]; let arr2 = JSON.parse(JSON.stringify(arr)) arr2[2].a = 'BBB'; console.log("arr",arr) //[1, 2, {a: 'AAA'}] console.log("arr2",arr2) //[1, 2, {a: 'BBB'}]4.5. cloneDeep()单级多级均为深拷贝，使用lodash工具中cloneDeep方法实现深拷贝，需要通过npm引入lodash库npm i -save lodash //全局安装<script> import _ from 'lodash'; export default { name: 'Test', mounted() { const arr = [1, 2, { a: 'AAA' }]; const arr2 = _.cloneDeep(arr); arr2[2].a = 'BBB'; console.log('arr', arr); // [1, 2, {a: 'AAA'}] console.log('arr2', arr2); // [1, 2, {a: 'BBB'}] }, }; </script>五、结论类型第一级为基础数据类型原数据中包含子对象浅拷贝改变不会使原始数据改变改变会使原始数据改变深拷贝改变不会使原始数据改变改变不会使原始数据改变原文链接：https://blog.csdn.net/ltlt654321/article/details/127047262

vue 获取元素宽高vue 中获取组件宽高分两种情况：1、获取普通组件宽高，直接使用 $refs 即可2、获取子组件宽高，需使用 $refs.$el子组件<template> <div class="div_box">这是一个子组件</div> </template> <script> export default { name: 'ChileHeight' } </script> <style lang="scss" scoped> .div_box { padding: 20px; border: 20px solid red; } </style>父组件<template> <div class="home"> <div class="div_card" ref="attrRef">获取元素高度</div> <child-height ref="childRef"></child-height> </div> </template> <script> import ChildHeight from './note/child-height.vue' export default { name: 'Home', components: { ChildHeight }, mounted() { // 获取元素宽高 const w = this.$refs.attrRef.offsetWidth const h = this.$refs.attrRef.offsetHeight console.log('获取元素宽高', w, h) // 获取子组件元素宽高 const w_child = this.$refs.childRef.$el.offsetWidth const h_child = this.$refs.childRef.$el.offsetHeight console.log('获取子组件元素宽高', w_child, h_child) } } </script> <style scoped> .div_card { padding: 20px; border: 10px solid yellow; } </style>clientHeight 和 offsetHeight 区别clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度原文链接：https://blog.csdn.net/lgg1997/article/details/125618858