2020前端知识点汇总(五)-vue

1、vue的组件通信？

• 父传子用props
• 父用子用ref
• 子调父用$emit
• 无关系用Bus

2、vuex？

• 组件通信库，可以避免子组件无法改变props的弊端等 mutations 同步操作， 用于改变状态 官方不推荐异步 action
• 执行多个mutaions，官方推荐异步操作 mapState、mapGetters、mapActions使用示例

3、vue的双向绑定？

• 原理：利用了 Object.defineProperty()这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。
• 缺点：双向数据流是自动管理状态的,但是在实际应用中会有很多不得不手动处理状态变化的逻辑, 使得程序复杂度上升, 难以调试。

4、解释computed watch methods？

• 前两者自动追踪数据，执行相关函数，最后一个手动调用；
• computed是计算属性，用法与data一致
• watch像事件监听，对象发生变化时，执行相关操作
• methods与js中执行方法类似
• computed通常只有get属性
• 数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择
• watch的对象必须事先声明

5、v-show和v-if指令的共同点和不同点？

• v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏
• v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

6、嵌套路由怎么定义？

• 嵌套路由是幻灯片的组件，router/index.js，我们把my，加了children，定义很多个子路由，子路由还可以继续嵌套路由。
• 定义方法：
  细节，children，path不用斜杠，访问to：/my/login
  7、 vue-router有哪几种导航钩子
• 全局的钩子函数:定义在全局路由对象中
• 某个路由独享的钩子,可以在路由配置上直接定义beforeEnter钩子函数
• 组件内的钩子函数: 定义在组件的route选项中

8、vuex是什么？怎么使用？哪种功能场景使用它？

• vue框架中状态管理。
• 在main.js引入store，注入。新建一个目录store，…… export 。
• 场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

9、axios是什么？怎么使用？描述使用它实现登录功能的流程？

• 请求后台资源的模块。
• npm install axios -S装好，然后发送的是跨域，需在配置文件中config/index.js进行设置。
• 后台如果是Tp5则定义一个资源路由。js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中

10、自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？

• 全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。
• 组件内定义指令：directives
• 钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）
• 钩子函数参数：el、binding

11、vue的双向绑定是通过什么来劫持各个属性的？

• vue是通过Object.defineProperty()来实现数据劫持的。
• Object.defineProperty( )它可以来控制一个对象属性的一些特有操作，比如读写权、是否可以枚举

12、vue-loader是什么？使用它的用途有哪些？

• 解析.vue文件的一个加载器。
• 用途：js可以写es6、style样式可以scss或less、template可以加jade等

13、为什么vue避免v-if和v-for用在一起?

• 一般我们在两种常见的情况下会倾向于这样做：
• 为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)。在这种情形下，请将 users 替换为一个计算属性 (比如activeUsers)，让其返回过滤后的列表。
• 为了避免渲染本应该被隐藏的列表 (比如 v-for=“user in users” v-if=“shouldShowUsers”)。这种情形下，请将 v-if 移动至容器元素上 (比如 ul, ol)。

14、vue的虚拟dom？

• 虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。

15、vue生命周期总共有几个阶段？

• beforeCreate（创建前）,
• created（创建后）,
• beforeMount(载入前),
• mounted（载入后）,
• beforeUpdate（更新前）,
• updated（更新后）,
• beforeDestroy（销毁前）,
• destroyed（ 销毁后）

16、vue slot是做什么的？

• 是对组件的扩展，通过slot插槽向组件内部指定位置传递内容，通过slot可以父子传参

17、说出至少4种vue当中的指令和它的作用？

• v-if 判断是否隐藏
• v-show 控制的隐藏出现，只是将css属性设为了display：none 或block;
• v-if 当值为 true时，显示div ，当值为false时，改元素消失，代码也会消失，相当于将代码删除了
• v-for 进行列表和表格的渲染
• v-bind 绑定属性，使用：替代 有三个修饰符：sync，once，camel将绑定的特性的名称转化为驼峰法则命名
• v-model 双向数据绑定
• v-html 获取html标签 v-text不解释标签，v-html解释标签

19、vue路由钩子函数用过没？

router.beforeEach((to, from, next) => {})

• to: (Route路由对象) 即将要进入的目标 路由对象
• from: (Route路由对象) 当前导航正要离开的路由
• next: (Function函数) 一定要调用该方法来 resolve 这个钩子。调用方法：next(参数或者空) ***必须调用

20、你常用的vue周边全家桶？

• vue-router路由
• vuex状态管理
• vue-resource / vue-axios请求数据
• vue-cli脚手架工具，用配置好的模板迅速搭建起一个项目工程

21、router.addRoutes用过吗？

• router.addroutes可以实现动态路由

22、nextTick使用场景？

• 需求：使用vue对ztree的封装，由于ztree是需要确定DOM节点id和数据之后，执行初始化方法完成ztree的树形展示，为了让vue引入的组件树彼此不受影响（是相互独立的对象），因此ztreeid是利用时间戳+随机数生成的。
• 问题：由于是变量，发现发送ajax请求数据回来之后还dom树还没有渲染完成（没有动态生成的ID）,导致树没有生成。
• 解决办法：修改treeId的值，使用$nextTick函数，确保dom树变化之后再发送ajax请求，这样就不会出现执行初始化方法的时候有数据没有对应的ID节点的尴尬现象。

23、Vue框架中，导航钩子有哪些？他们有哪些参数？

• 有两种钩子，前置守卫，后置钩子
• 参数：
  • to: Route，代表要进入的目标，它是一个路由对象
  • from: Route，代表当前正要离开的路由，同样也是一个路由对象
  • next: Function，这是一个必须需要调用的方法，而具体的执行效果则依赖 next 方法调用的参数
  • next()：进入管道中的下一个钩子，如果全部的钩子执行完了，则导航的状态就是 confirmed（确认的）
  • next(false)：这代表中断掉当前的导航，即 to 代表的路由对象不会进入，被中断，此时该表 URL 地址会被重置到 from路由对应

24、vue中 key 值的作用？

• 使用key来给每个节点做一个唯一标识key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

25、vue 的双向绑定的原理是什么？

• vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。