前端高频面试题总结（二）

一：你对cavans有了解吗

1.什么是canvas(画布)
是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形
例如，它可以用于绘制图形，创建动画。最早由Apple引入WebKit
我们可以使用标签来定义一个canvas元素
----->使用标签时，建议要成对出现，不要使用闭合的形式。
----->canvas元素默认具有高宽
width： 300px
height：150px
2 canvas标签的两个属性
看起来和元素很相像，唯一的不同就是它并没有 src 和 alt 属性。
实际上，标签只有两个属性—— width和height。这些都是可选的。
当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。

二： vue双向绑定的原理

使用v-model来实现

Vue 实现双向数据绑定主要采用：数据劫持结合“发布-订阅”模式的方式，通过Object.defineProperty（）的 set 和 get，在数据变动时发布消息给订阅者触发监听。

缺点：

三：vue的事件修饰符

v-on 指令常用修饰符：

.stop - 调用 event.stopPropagation()，禁止事件冒泡。
.prevent - 调用 event.preventDefault()，阻止事件默认行为。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
10 .middle - (2.2.0) 只当点击鼠标中键时触发。

四：前端优化有哪些？

路由懒加载图片懒加载合并代码压缩代码雪碧图等。

五：js的数据类型

七种数据类型
• Boolean
• Null
• Undefined
• Number
• String
• Symbol (ECMAScript 6 新定义)
• Object
(ES6之前)其中5种为基本类型:string,number,boolean,null,undefined,
ES6出来的Symbol也是原始数据类型，表示独一无二的值
Object 为引用类型(范围挺大),也包括数组、函数,

六：小程序api有了解吗？

参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html

七：怎么设置vue中网页的title

1、在项目目录下安装vue-wechat-title

cnpm i vue-wechat-title --save

2、在main.js中使用vue-wechat-title

import VueWechatTitle from 'vue-wechat-title'  //引入
Vue.use(VueWechatTitle)   //注册组件

3、在router.js的配置中设置

{
    path: '/login',
    component:Login,
    name:'',
    hidden:true,
    meta:{
       title:'登录',
       requireAuth:true
   }
},

4、在每个vue页面中加入

<div v-wechat-title='$route.meta.title'></div>

八：vue项目中怎么设置环境变量？

：主要通过检测process.env.NODE_ENV===”production”和p rocess.env.NODE_ENV===”development”环境，来设置线上和线下环境地址，从而实现线上和线下环境地址的切换，通常在封装http请求时，抽取出环境变量所依赖的环境（生产，开发，测试）地址，在封装好的http请求中引入，从而方便切换环境地址。

九：你了解vue中的bus吗

在任意两个组件传值中，可以创建一个bus类负责事件派发、监听和回调管理。

使用方式
在Vue项目中，我a.vue需要给b.vue传值，使用bus传值的方式如下：

1）建立bus.js文件
在文件夹下建立bus.js文件，写入以下代码：

// bus.js
import Vue from 'vue'
export default new Vue()

2）a.vue中添加代码

// 引入公共的bus，来做为中间传达的工具
import Bus from '../../api/bus'

beforeDestroy(){
   Bus.$emit('val', 要传递的值)
   console.log('我发送成功了');      
},

3）b.vue中添加代码

import Bus from '../../api/bus'
		
created(){
   // 用$on事件来接收参数
   Bus.$on('val', (data) => {
     console.log(data)  
   })
}

依古比古*

原创文章 22 获赞 35 访问量 1872

关注私信