什么是BFC？ BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。 Box：css布局的基本单位 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子： Formatting Context Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。 BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列
rem与em的使用和区别详解 em相对于父元素，rem相对于根元素。 em是基于html元素的字体大小来决定，而em则根据使用它的元素的大小决定（很多人错误以为是根据父类元素，实际上是使用它的元素继承了父类的属性才会产生的错觉） 在css中单位长度用的最多的是px、em、rem，这三个的区别是： px是固定的像素，一旦设置了就无法因为适应页面大小而改变。 em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。 对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。 rem中的r意思是root（根源），这也就不难理解了。 em 子元素字体大小的em是相对于父元素字体大小 元素的width/height/padding/margin用em的话是相对于该元素的font-size
vue父子组件生命周期执行顺序 Vue中父子组件生命周期执行顺序 父beforeCreate-> 父create -> 子beforeCreate-> 子created -> 子mounted -> 父mounted 复制代码 子组件挂载完成后，父组件还未挂载。所以组件数据回显的时候，在父组件mounted中获取api的数据，子组件的mounted是拿不到的。 子组件挂载完成后，父组件还未挂载。所以组件数据回显的时候，在父组件mounted中获取api的数据，子组件的mounted是拿不到的。 在created中发起请求获取数据，依次在子组件的created或者mounted中会接收到这个数据。 加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted 更新过程 父beforeUpdate->子beforeUpdate->子updated->父updated 销毁过程 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed 常用钩子简易版 父create->子created->子mounted->父mounted
虚拟dom的原理和本质 虚拟dom的本质就是对象，对象至少包涵三个属性tag,attrs,children 主要的过程是模板☞render☞虚拟dom☞(createElement, watcher, patch,update)☞真实dom Vue通过编译将模版转换成渲染函数(render)，执行渲染函数就可以得到一个虚拟节点树(虚拟DOM)，虚拟节点树(虚拟DOM)提供虚拟节点vnode和对新旧两个vnode进行比对并根据比对结果进行DOM操作来更新视图
uniapp框架和原生小程序开发的区别 1.vue的事件绑定可以直接传参数,而小程序需要使用自定义属性data
<button @click="btnClick(123)"> vue的按钮
小程序的按钮 2.组件数据状态声明和修改,小程序使用this.setData // vue data(){ return { name: "myname" } } // vue使用赋值的方式修改 this.name = "new name"; // 读取属性 console.log(this.name)// -------------------------------------------------------------- // 小程序 data: { name: "myname" } // 小程序使用setData this.setData({ name: "new name" })
// 读取属性 console.log(this.data.name) // -------------------------------------------------------------- 3.模板中绑定动态值和动态属性
vue中diff算法的原理 在数据发生变化，vue是先根据真实DOM生成一颗 virtual DOM ，当 virtual DOM 某个节点的数据改变后会生成一个新的 Vnode ，然后 Vnode 和 oldVnode 作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使 oldVnode 的值为 Vnode ，来实现更新节点。 1.原理简述： （1）先去同级比较，然后再去比较子节点 （2）先去判断一方有子节点一方没有子节点的情况 （3）比较都有子节点的情况 （4）递归比较子节点
CSS position 属性 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 inherit 规定应该从父元素继承 position 属性的值。
JavaScript原型，原型链 ? 有什么特点？ 在JavaScript中,一共有两种类型的值,原始值和对象值.每个对象都有一个内部属性[[prototype]],我们通常称之为原型.原型的值可以是一个对象,也可以是null.如果它的值是一个对象,则这个对象也一定有自己的原型.这样就形成了一条线性的链,我们称之为原型链. 访问一个对象的原型可以使用ES5中的Object.getPrototypeOf方法,或者ES6中的proto属性. 原型链的作用是用来实现继承,比如我们新建一个数组,数组的方法就是从数组的原型上继承而来的。
