目录
1、flex布局
2、vue的特性有哪些？
3、Vue中父子组件的传值的方式有几种？它们有什么数据上的限制
4、项目中用了vue组件传值的方式有哪些
5、项目中用到的组件
6、浏览器输入url到渲染网页的过程
7、Vue数据双向绑定
8、Vue-Router
9、移动端响应式布局
1、flex布局
在flex容器中有两条轴，水平主轴和垂直的交叉轴，在容器中的每个默认单元块被称之为flex-items占据的主轴空间为main size，交叉轴空间为cross size
任何一个容器都可以被指定为flex布局，这样容器内部的元素就可以用flex来进行布局，如果使用块元素，就使用display：flex，如果使用行内元素，就使用display：inline-flex
在容器上可以设置六种属性：
1、flex-direction：决定主轴方向，即项目的排列方向，默认值row，水平方向，起点为左端
2、flex-wrap：决定容器内项目是否可以换行，默认情况下不换行，flex空间不足时，项目尺寸随之调整并不会被挤到下一行
3、flex-flow，flexdirection和flex-wrap的简写形式
4、justify-content，定义了项目在主轴上的对齐方式
5、align-items定义了项目在交叉轴上的对齐方式
6、align-content定义了多跟轴线的对齐方式，如果只有一根轴线，那么该属性不起作用，即flex-wrap为nowrap的时候，项目不换行，不会产生多条轴线
有六种属性可以用在item项目上
1、order：定义了项目在容器中的排列顺序，数值越小，越靠前
2、flex-basis：定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间，默认值auto，即项目本来的大小，这时候item的宽高度取决于width和height的值，当主轴为水平方向的时候，设置了flex-basis，项目宽度的设置值就会失效，flexbasis需要跟flexgrow和flex-shrink配合使用才能发挥效果
当flex-basis为0%时，是把该项目视为0尺寸的，即使声明该尺寸为140px也没什么用
当flex-basis为auto时，则根据尺寸的设定值（假设为100px），则这100px不会纳入剩余空间
3、flex-grow：定义项目的放大比例
4、flex-shrink：定义了缩小比例
5、flex：简写
6、align-self：允许单个项目有与其他项目不一样的对齐方式
2、vue的特性有哪些？
Vue有什么特性，相对于其他框架都有那些优势！ - 达达前端 - 博客园 (cnblogs.com)
表单操作，自定义指令，计算属性，过滤器，侦听器，生命周期
表单操作用于用户的交互，通过表单来进行数据的交互
基于Vue的表单操作，input单行文本，textarea多行文本，select下拉多选，radio单选框，checkbox多选框，表单操作，双向数据绑定v-model
自定义指令是因为内置指令不满足需要
计算属性，表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁
计算属性和方法的区别：方法不存在缓存，计算属性是基于它们的依赖进行缓存的。只要值不变就不重新计算。方法不存在缓存的机制。
computed: {
msgDa: function() {
return this.msg.split('').reverse().join('')
}
}
<div>{{msgDa}}</div>
// 直接调用函数名
侦听器，是用来侦听数据的变化，数据一旦发生变化就会通知侦听器所绑定的方法，侦听器绑定方法，数据变化时执行一步或开销较大的操作，计算属性只能用于一些简单的操作
watch: {
firstName: function(val) {
// val表示变化之后的值
this.fullName = val + this.lastName;
},
lastName: function(val) {
this.fullName = this.firstName + val;
}
}
过滤器，用来格式化数据，比如将字符串格式变成大写，将日期格式变化为指定的格式等
Vue.filter('过滤器名称', function(value) {
// 过滤器业务逻辑
})
// 过滤器的使用
<div> {{msg | upper}} </div>
Vue.filter('upper', function(val) {
return val.chatAt(0).toUpperCase() + val.slice(1);
})
生命周期，一个Vue实例从创建、运行到销毁期间总是伴随着各种各样的事件，这些事件，就是Vue实例的生命周期
常见的生命周期函数：创建前，此时还没有初始化好data和methods属性
创建后，此时data和methods已经在内存中创建完成，但是还没有开始编译模板
挂载前，此时已经完成了模板的编译，但是还没有挂载到页面中显示
挂载，此时将已经编译好的模板，挂载到了页面指定的容器中显示
更新前，数据更新前，此时data中的状态值是最新的，但是页面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
更新后，data中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了
销毁前，实例仍完全可用
销毁后，事件监听被移除，子实例也会被销毁
3、Vue中父子组件的传值的方式有几种？它们有什么数据上的限制
父组件向子组件，props，子组件向父组件，emit
4、项目中用了vue组件传值的方式有哪些
props、emit
依赖注入，provide，inject，在祖先组件中增加provide，在子组件中增加inject，这种方法允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深
通过父链/子链进行数据传递（parent，children）
5、项目中用到的组件
elementUi echarts
6、浏览器输入url到渲染网页的过程
7、Vue数据双向绑定
Vue是采用数据劫持结合发布/订阅者模式的方式，通过Object.defineproperty()来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
首先要对数据进行劫持监听，我们需要设置一个监听器Observer来监听所有的属性，如果属性发生变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者有很多个，所以需要一个消息订阅器Dep来专门收集这些订阅者，然后再监听器和订阅者之间进行统一管理。接着我们还需要一个指令解析器COmpiler，对每个节点元素进行扫描和解析，将相关指令（如v-model，v-on）对应初始化为一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。
Vue2.0响应式数据存在缺陷
无法监听对象属性的动态添加和删除，无法监听到数组下标和length长度的变化，解决方法$get，$get,$delete
什么数组下标复制和对象新增属性不会被拦截到。为什么vue3中换proxy实现了。
实际上Object.defineProperty本身是可以监控到数组下标的变化的，只是在Vue的实现中，从性能体验的性价比考虑，就放弃了这个特性
object.defineProperty只是劫持静态对象的属性，而Proxy是直接代理对象，由于Object.definProperty只能对属性进行劫持，需要遍历对象的每个属性，如果属性也是对象的话，则需要深度遍历，而Proxy直接代理对象，不需要遍历操作
Object.defineProperty对新增属性需要手动进行observe，
由于 Object.defineProperty劫持的是对象的属性，所以新增属性时，需要重新遍历对象，
对其新增属性再使用 Object.defineProperty 进行劫持。
也正是因为这个原因，使用 Vue 给 data 中的数组或对象新增属性时，
需要使用 vm.$set 才能保证新增的属性也是响应式的。
如果采用 proxy 实现，Proxy 通过 set(target, propKey, value, receiver) 拦截对象属性的设置，是可以拦截到对象的新增属性的。
8、Vue-Router
vue的单页面应用是基于路由和组件的。路由用于设定访问路径，并将路径和组件映射起来，传统的页面应用是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。不能像原来一样直接使用a标签呢？因为我们一般用vue做的都是单页面应用，只有一个主页面index.html，所以a标签时不起作用的。
路由传参可分为两种
query和params来实现
query如何实现传参
通过在router-link或者this.$router.push（）传递。在地址栏传递拼接?传递参数
然后再页面通过this.$router.query.id来接收
优点，通用性比较好，刷新数据不会消失
params如何实现传参
也是通过router-link里面或者this.$router.push()传递
在地址栏传递使用/来进行拼接
然后在页面通过this.$route.params.id 接收
router-link、this.roter.push、this.router.go()、this.router.replace
路由守卫是什么？
导航路由守卫就是路由跳转前、中、后过程中的一些钩子函数，这个函数能让你操作一些其他的事情，这就是路由守卫
导航守卫分为：全局的、组件内的、单个路由共享三种
全局的特点是所有配置路由的组件都会触发
全局路由的钩子函数包括beforeEach()，在路由跳转前触发，参数包括to，from，next三个，这个钩子函数主要用于登录验证，跳转前触发
afterEach()也是路由跳转后触发
路由独享的，指单个路由配置的时候也可以配置钩子函数
组件内的，指在组件内执行的钩子函数，类似于组件内的生命周期，组件内的钩子函数，beforeRouterEnter，路由进入组件之前调用，beforeRouterUpdate，路由改变时，beforeRouterLeave离开时
9、EventLoop，在nodejs中的EventLoop是如何什么样的。
js单线程
步骤一、从script代码开始，到script代码结束，按顺序执行所有代码
步骤二、在步骤一顺序执行代码的过程中，如果遇到同步任务，立即执行，然后继续执行后续代码，如果遇到异步任务，将异步任务交给对应的模块处理（事件交给事件处理线程，ajax交给异步HTTP请求线程），当异步任务到达触发条件以后将异步任务的回调函数推入任务队列（宏任务推入宏任务队列，微任务推入微任务队列）。
步骤三、步骤一结束后，说明同步代码执行完毕。此时读取并执行微任务队列中保存的所有微任务
步骤四、步骤三完成后读取并执行宏任务队列中的宏任务，每执行完一个宏任务，就去查看微任务队列中是否有新增的微任务，如果存在则重复执行步骤三；如果不存在继续执行下一个宏任务，
宏任务：settimeout、settimerval
微任务：promise await
10为什么要使用less、sass，其与css3相比有哪些优势
为了提示开发效率，使得css编写更加灵活
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
