Vue问题汇总

1.定时器如何销毁？

　　使用this.$once('hook:beforeDestroy', ()=>{ clearInterval() })

2.大量数据渲染如何优化？

　　变量在beforeCreate或created中声明

3.vue组件在什么时候会被销毁？

　　1.关闭页面；2.路由跳转；3.v-if和改变key值

4.子组件访问父组件实例？

　　this.$parent

5.组件访问根实例？

　　this.$root

6.什么是递归组件？举例说明

　　组件自己调用自己，例如：树形结构的菜单或分类

7.在vue中使用this需要注意的问题？

　　在匿名函数中this指向发生改变：1.可以使用箭头函数；2.在外部重新定义变量let that = this

8.vue中is的特性主要用在哪个方面？

　　1.动态切换组件；:is="组件名变量"(组件会在组件名改变时改变)

　　2.解析DOM模板，解除限制元素；有些HTML元素，例如<ul><ol><table><select>,对于哪些元素可以出现在其内部是有严格限制的,增加is特性来扩展,从而达到可以在这些受限制的html元素中使用。

9.组件中写name有什么作用？

　　1.使用keep-live时，搭配name进行缓存过滤；

　　2.DOM做递归组件时需要调用自身name

10.说说对provide和inject的理解？

　　通过在父组件provide一些数据，然后在所有子组件中都可以inject通过获取该参数。（主要是解决层级过多或循环组件，比如tree、menu、list等传参困难，难以管理的问题）

　　例如：父：provide() { return { list: this.tableList } }; 子：inject: ['list']

11.SSR解决了什么问题？怎么做SSR？

　　服务端渲染（server side render），解决SPA（单页应用程序）应用的两大缺点：1.首屏加载速度慢；2.不利于SEO问题；解决方案：使用Nuxt.js

12.vue父子组件双向绑定的方法有哪些？

　　1.props+$emit；2.v-model；3.使用.sync修饰符；

13.vue-router路由配置（懒加载）：

　　写法1：component: resolve => require(['@/page/home'], resolve)；

　　写法2：component: () => import('@/page/home')；

　　懒加载：打包时将component生成多个js，访问页面按需加载，提升访问速度。

　　非懒加载：打包时将所有component放在一个js中，加载速度慢。

14.vue如何获取DOM节点？

　　1.document.getElementById('id')；2.this.$refs.xx

15.vue删除数组用delete和Vue.delete有什么区别？

　　delete：被删除的成员变为empty/undefined，其它元素键值不变

　　Vue.delete：直接删了数组成员，并改变了数组键值

16.vue组件和插件有什么区别？

　　组件（component）是用来构成App的业务模块，它的目标是App.vue；

　　插件（plugin）是用来增强技术栈的功能模块，它的目标是App本身；

17.v-if和v-for的优先级？如果两个同时出现如何优化？

　　v-for优先级高；尽量避免这种情况出现，如果实在需要，则在外部嵌套templete标签，在此标签进行v-if判断；

18.$nextTick有什么用？

　　处理数据动态变化后，dom还未及时更新的问题。使用$nextTick就可以获取到数据更新后最新的dom变化。

19.watch深度监听？

data() {
  return {
    list: {
      title: '1111'
    }
  }
},
watch:{
  list: {
    handler(newVal, oldVal) {
      console.log(newVal.title)
    },
    deep: true, //开启深度监听
    immediate: true, //刷新页面立马触发一次handler
  }
}

20.vue修改打包后的文件路径

　　webpack：output.path；vue-cli3：outputDir

21.vue中（??）和（||）的区别？以及（?.）的使用

　　??和||都是用来当第一个数据为假时输出后面的数据；

　　??规则：当且仅当第一个数据为null或undefined时，才会输出第二个数据；

　　||规则：当第一个数据为""、false、0、null、undefined时，直接输出第二个数据；

　　?.的使用：let a = obj ?. user?. name ?? '张三' ；（解析：当obj中存在obj.user.name时则输出，不存在则输出'张三'）

22.var、let、const的区别？

　　var：定义变量，没有块的概念，可以跨块访问，不能跨函数访问；

　　let：定义变量，只能在块作用域里访问，不能跨块、跨函数访问；

　　const：定义常量，使用时必须初始化（即赋值），只能在块作用域访问，而且不能修改；

23.组件通信：$attrs，$listeners（参考：https://www.cnblogs.com/vickylinj/p/13376391.html）

　　个人理解：相当于props和$emit的延续版，只需要在子组件标签中加入v-bind="$attrs"或v-on="$listeners"就可以将绑定的参数或事件全部传递给子组件（部分排除，以下说明）：

　　$attrs：排除props声明的参数和绑定的class,style，子组件this.$attrs可以获取到父组件所有绑定数据，在子组件中使用v-bind='$attrs'可以继续传递给下一级子组件；

　　$listeners：排除带有.native事件修饰符以外的所有事件监听器，在子组件中使用v-on="$listeners"可以继续传递给下一级子组件；

　　使用场景：1.多层级：多参数/多事件通信时使用；2.对UI库进行二次封装时，在保留其原有的事件和参数的情况下进行二次封装；

24.组件通信：provide和inject

　　浅析：provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

　　父组件：provide（格式类似data）例：provide(){ return{ list: xx } } 【当数据为响应式时，参数定义为'',延迟响应完成后重新赋值：this._provided.list = xxx；注意：判断组件标签显示v-if="响应完成后的条件"】

　　子孙组件：inject （格式字符串数组/对象）例：inject: ['list'] 或 inject: { list2: { form: 'list', defaut: '' } } （当需要改变传递的参数名时：list->list2）