vue

  1. 写出你知道的所有指令
  2. 什么时候视图不会更新? 
  1. //1.操作数组的索引
  2. //2.操作数组的length
  3. //以上两种情况都不会更新视图
  1. 为什么操作这两个属性不会更新视图? 
  1. //原因就是因为Vue2.0底层响应式原理使用了ES5中的Object.defineProperty()这个方法,这个方法有个缺点,缺点就是无法劫持数组,数组的变化是没有办法进行响应
  2.     //操作一些数组的方法 比如push pop shift unshift reverse等方法会触发视图的更新,因为vue的底层特别对这几个方法做了hack处理,只要我们调用这些方法也会视图的更新
  3.     //Vue3.0的版本,使用的proxy这个方法,这个方法可以劫持数组,就不会出现操作索引和length不更新视图的情况了
  1. 怎么处理不更新的问题? 
  1.  //1.不要操作数组的length和索引,如果说硬要操作,可以使用Vue.$set(target,key,value)方法
  2.  //2.如果说操作了这些属性,不知道问题在哪里,解决不了视图不更新的情况,我们可以调用强制更新$forceUpdate()
  1. v-for中有个属性,key,key的作用是什么? 
  1. 用于区分diff算法的时候,元素的唯一性
  2. //key的值,正常情况下一般都要给一个唯一的值,如果没有一个惟一的情况下,那么可以暂时的使用index来代替
  3. //写项目的时候,后台返回的数据肯定有id,那么这个id就是唯一的标识所以我们一般使用id来作为key的值
  1. v-model的修饰符 ? 
  1. trim lazy number
  1. V-if v-show的区别 以及使用场景 
  1. //v-if 都是用于控制元素/组件的显示和隐藏 值都是布尔值,如果布尔值为true那么元素就会显示,如果为false,那么元素或者组件就会隐藏 v-if元素不显示的时候,dom结构也会一并移除
  2. //v-if可以和v-else v-else-if结合使用,如果v-if布尔值为true,那么不会展示v-else的内容,如果布尔值为false,那么就会展示v-else,而不会展示v-if,两者的关系,就是老死不相往来,互斥
  3. //v-show  都是用于控制元素/组件的显示和隐藏 值都是布尔值,如果布尔值为true那么元素就会显示,如果为false,那么元素或者组件就会隐藏 v-show隐藏元素之后,不会移除dom结构
  5. //使用场景:首次渲染开销较大的时候,可以使用v-if 频繁切换的时候使用v-show
  1. v-on的修饰符 
  1. //prevent 阻止默认事件
  2. //ocne 只调用一次
  3. //native 触发组件根元素的原生事件
  1. 定义自定义指令的方式,以及自定义指令的钩子函数 
  1. //bind
  2. //inserted
  3. //update
  1. 计算属性的特点? 
  1.  //1.计算的结果会缓存
  2.  //2.根据外界响应式依赖发生变化而变化
  1. watch和compunted的区别是什么? 
  1. //watch的监听函数,只要是监听的属性变化了就会触发,而computed属性的函数,需要在外界响应式依赖的值发生变化的时候才会变化
  2. //computed的结果会缓存
  1. watch监听的三种情况和写法 
  1. 普通监听
  2. 深度监听
  3. 字符串写法
  1. v-if v-for的优先级 
  1. v-for优先级别高
  1. 全局组件和局部组件创建方式
  2. 组件的通信方式 写出所有的
  3. 在组件上使用v-model流程
  4. 封装组件的流程
  5. slot具名插槽 插槽作用域
  6. Mixins合并策略 
  1. //1.如果说混入了data属性,那么会对data进行递归合并,冲突的时候,以组件的属性优先
  3. //2.同名的钩子函数会被合并为一个数组,都会进行调用,会以混入对象的钩子函数优先调用
  5. //3.组件选项 比如methods directives components filters...都会被合并为一个对象,冲突的时候,以组件的键值对为主
  1. $nextTick的作用
  2. vue生命周期钩子函数 created中能不能修改data 为什么?
  3. 发送异步请求在哪个钩子?
  4. 动态添加路由用什么方法?
  5. beforeDestroy和destroyed一般用来做什么?
  6. keep-alive的作用以及使用方式 钩子函数 以及两个属性的用法
  7. 组件相互嵌套,钩子函数的执行顺序是什么?
  8. 父组件的beforeUpdate触发了会不会触发子组件的beforeUpdate?不会
  9. 为什么beforeCreate不能发请求? 因为$data都还没初始化,就算获得了后台数据,也不能修改data
  10. 什么是虚拟dom?通过js模拟真实dom的嵌套,创建踹的结构,就是虚拟dom,在内存中,页面是看不见的,只有添加到页面上才能看见
  11. 为什么要使用虚拟dom?使用虚拟dom,可以在内存中更新结构,而不是操作真实dom一个一个更新,最大的好处提高页面渲染的性能,结合diff算法 让页面进行高效更新
  12. Vue响应式的原理是什么?
  13. 什么是回流 什么是重绘?
  14. 单页应用优化访问速度
  15. 触发回流的条件 触发重绘的条件?
  16. 如何获取路由动态参数 
  1. # 回流
  2. 1. 位置的改变 translate 定位的left top 
  3. 2. 元素位置的显示和隐藏也会引起回流
  4. 3. 宽高的变化
  5. # 重绘
  6. 1. 颜色的变化
  7. 2. 字体风格的变化
  8. 3. 背景的变化
  1. 什么是单页应用? 一个项目只有一个html页面 所有的页面跳转依据于路由进行
  2. 单页应用的有点和缺点? 用户体验好,切换速度快,不需要刷新整个页面
  3. 怎么解决单页应用缺点的问题? 使用服务端渲染 nuxt
  4. History hash abstract模式的区别? 
  1. 1. hash有#号,#号后面的url不会向后端发起请求
  3. 2. hash路由使用onhashchange监听 history使用onpopstate监听 
  5. 3. history使用的是H5的api pushState replaceState
  6. 4. 当hash值相同时,不会触发hashchange,history当输入相同的路径的时候,会将浏览器中的地址当成是请求地址向后台发送请求,会造成页面404
  7. 5. abstract模式是在没有浏览器api的情况下自动启用,abstract模式在切换页面的时候,路径是不会发生变化的
  9. 6. 关键字 onhashchange pushstate replacestate popstate
  10. 7.
  1. 动态路由参数解耦合步骤
  2. vuex中的state能映射到组件的data中吗?为什么?
  3. 修改vuex中state唯一的方式是什么?只有mutation中可以修改嘛?哪些方式还可以修改state的状态?
  4. 组件中的data为什么要写成一个函数?
  5. 说一下vuex异步的操作流程
  6. 小程序的分包流程
  7. 小程序分包的大小
  8. 小程序路由怎么跳转
  9. 小程序怎么定义组件
  10. 小程序怎么发请求,本地存储如何存储
  11. 小程序如何完成路径的导航? wx.openLocation

其它

说说vue动态权限绑定渲染列表（权限列表渲染）

  1. 首先请求服务器,获取当前用户的权限数据,比如请求 this.$http.get(“rights/list”);
  2. 获取到权限数据之后,在列表中使用v-if v-if-else的组合来展示不同的内容 
  1. <template>
  2.   <div>
  3.     <!-- 面包屑导航区 -->
  4.     <el-breadcrumb separator-class="el-icon-arrow-right">
  5.       <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  6.       <el-breadcrumb-item>权限管理</el-breadcrumb-item>
  7.       <el-breadcrumb-item>权限列表</el-breadcrumb-item>
  8.     </el-breadcrumb>
  9.     <!-- 卡片视图 -->
  10.     <el-card>
  11.       <el-table :data="rightsList" border stripe>
  12.         <el-table-column type="index" label="#"></el-table-column>
  13.         <el-table-column label="权限名称" prop="authName"></el-table-column>
  14.         <el-table-column label="路径" prop="path"></el-table-column>
  15.         <el-table-column label="权限等级" prop="level">
  16.           <template slot-scope="scope">
  17.             <el-tag v-if="scope.row.level === '0'">一级</el-tag>
  18.             <el-tag type="success" v-else-if="scope.row.level === '1'">二级</el-tag>
  19.             <el-tag type="danger" v-else>三级</el-tag>
  20.           </template>
  21.         </el-table-column>
  22.       </el-table>
  23.     </el-card>
  24.   </div>
  25. </template>
  27. <script>
  28. export default {
  29.   data() {
  30.     return {
  31.       // 权限列表
  32.       rightsList: []
  33.     };
  34.   },
  35.   created() {
  36.     this.getRightsList();
  37.   },
  38.   methods: {
  39.     async getRightsList() {
  40.       //获取权限列表数据
  41.       const { data: res } = await this.$http.get("rights/list");
  42.       if (res.meta.status !== 200) {
  43.         return this.$message.error("获取权限列表失败！");
  44.       }
  45.       this.rightsList = res.data;
  46.     }
  47.   }
  48. };
  49. </script>
  51. <style lang='less' scoped>
  52. </style>

Vue用的哪种设计模式

  1. 属于发布订阅模式,在vue中使用observer和definereactive两个方法的结合对数据进行递归劫持,然后通过watch这个类来对属性进行订阅,Dep类用于解耦合,当数据变更的时候先触发数据的set方法,然后调用Dep.notiify通知视图更新

说说vue操作真实dom性能瓶颈

vue性能瓶颈的几种情况

  1. 一次渲染大量的数据的时候,存在大量数据并且都是复杂类型的时候,会导致vue对数据的劫持时间和渲染时间变长, js 连续执行时间过长，会导致页面长时间无法交互，而且渲染时间太慢，用户一次交互反馈的时间过长。

化方案:可以使用requestAnimation这个方法,将数据进行分割,分批次渲染,减少了 js 的连续运行时间，并且加快了渲染时间，利用加长总运行时间换取了渲染时间，用户既能快速得到反馈，而且不会因为过长时间的 js 运行而无法与页面交互。

  1. 当页面中存在大量数据,只是修改了一小部分导致页面也会导致页面卡顿,因为vue的更新以组件为粒度进行更新的，只要修改了当前组件中所使用的数据，组件就会整个去进行更新,造成大量的时间浪费

优化方案:将不同的模块划分成不同的组件,这样有效降低虚拟dom的diff运算时间过长的问题,比如将大量数据的模块单独放一个组件,其它放一个组件,由于vue是以组件为粒度更新,修改其它组件的情况下不会导致table的重新diff,提升页面响应速度高达几百倍

  1. 动态插槽作用域或者静态插槽的更新

使用插槽作用域来替换这两种操作方式,一样能提升性能,因为使用插槽作用域之后,插槽内容会被封装到一个函数中,被子组件渲染,而不是在父组件