前端面试问题
- vue的跨域 (CORS)
- 给自定义组件添加点击事件: @click.native="search",native的作用是监听组件根元素的原生事件,作用就是把一个vue组件转化为一个普通的HTML标签.
- v-show 与 v-if 区别:
- v-show是简单的css的display:none隐藏,而v-if是真正的销毁这个dom
- v-show一般是用在需要频繁的切换的地方,消耗的资源少,v-if适合在条件不怎么变的地方执行,v-if是惰性的，如果初始条件为假，则什么也不做,只有在条件第一次变为真时才开始起作用
- 动态绑定class:
- 给它一个对象,这个对象可以来自于data或者computed,也可以直接写对象判断
- 通过data :class="{'样式1':flag1, '样式2': flag2}" data () { return { flag1: false, flag2: false } },
- 通过computed :class="classObject" computed: { classObject () { return { 样式1: this.flag1, 样式2: this.flag2 } } },
- 直接标签中写对象三元表达式 :calss="{ '样式1': 判断条件 }"
- 给他一个数组 :class=[ '样式1', 判断条件 ? '样式2' : '' ]
- axios和ajax的区别
- axios是通过promise实现对ajax技术的一种封装,ajax技术实现了网页的局部数据刷新
- axios使用步骤:
- 如果没有axios包,先去npm
- 在main.js中通过import导入 import axios from 'axios'
- 把axios挂载到vue的原型对象 Vue.prototype.$http = axios 这里的$http是别名,之后就可以直接用this.$http来调用axios,$是为了使得http这个名字不发生冲突的简单约定,不加的话this.http这样可能会被同名的东西给覆盖
- 配置请求的根路径 axios.defaults.baseURL = '后台写好的接口'
- 这些都写完了就可以直接通过this.$http.get('接口信息')来与后台进行交互了
- axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样，简单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，axios有的ajax都有，ajax有的axios不一定有，总结一句话就是axios是ajax，ajax不止axios。
- 路由懒加载 打包项目的时候,js包会很大,通过懒加载,把不同路由的组件分成不同的代码块,访问的时候才加载,就很快
- 安装插件 cnpm install --save-dev @babel/plugin-syntax-dynamic-import
- 配置文件声明 '@babel/plugin-syntax-dynamic-import' => bable.config,js
- plugins其实是在bable.config.js文件中plugins里面进行添加 module.exports = { plugins: [ '@babel/plugin-syntax-dynamic-import' ] }
- 路由按需加载 const Login = () => import(/* webpackChunkName: 'login_home_welcome' */ '../components/login/login.vue')
- 动态路由
- 动态路由分两种,params和query,
- 前者类似post,需要在路由文件中配置path,要不然刷新会消失,必须有name
- 后者会被看到参数
- 取参数: this.$route.params.id/$route.params.id this.$route.query.id/$route.query.id
- data为啥得是个函数并且返回一个对象,而new Vue就不用
- 因为这样做可以把作用域隔离开,组件创建了是为了复用,每创建新的实例data里的数据是不会相互干扰
- 计算属性和 watch 的区别
- computed自带deep,而watch只能表面观察,无法监听到对象内部的属性变化,加上深度监听就行了,
- deep:深度监听，默认false
- handler:回调函数
- immediate:页面初始化时是否触发回调，默认false
- computed是自动监听依赖值,值变了就返回内容,只是需要之就可以用computed,而watch更注重业务,就算值变了之后执行的回调函数里面处理一些业务
- watch的回调函数: watch: { '监视的变量名' (newVal, oldVal) { 监视的变量名发生变化触发的业务 } }
- 深度监视: watch: { '监视的变量名' : { deep: true, handler(newVal, oldVal) {监视的变量名发生变化触发的业务} , immediate: true } }
- 什么是cdn cdn是内容分发网络,一些固定资源放到了网上的一些服务器里,使用的时候直接通过cdn链接调用,把压力推给网上的服务器,本地的服务器就轻松了.
- cdn优化
- 加载页面得把mode_modules里的东西都加载上,这样就得等,服务器压力就比较大,直接用cdn外界引入,就不会堵塞,服务器压力也会变小
-
import导入的东西,都会给压成一个文件,打包后这个文件就很大,通过externals这个webpack的节点,配置加载外部的cdn,
在这个externals里声明的依赖包就不会被打包了
- vue路由模式切换
- 直接在路由文件里加上 mode: history
- keep-alive vue自带的东西,通过这东西把组件可以缓存起来,include定义缓存白名单，keep-alive会缓存命中的组件；exclude定义缓存黑名单，被命中的组件将不会被缓存；max定义缓存组件上限，超出上限使用LRU的策略置换缓存数据。
- 单向数据流和双向数据流
- 单向数据流: 用户操作view,action响应用户操作,并且对state进行操作更新,state更新后重新渲染视图
- 双向数据流: v-model双向数据绑定,数据变视图也变,视图变数据也变
- 路由的跳转方式
- 编程式导航: router.push('路径')
- 常用导航 <router-link to='home'>
- element里index直接导航
- v-model 怎么实现 用input为例子: 先v-bind绑定value,然后来一个事件触发,比如@input,触发回调函数
浙公网安备 33010602011771号