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

一： 你对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 指令常用修饰符：

1. .stop - 调用 event.stopPropagation()，禁止事件冒泡。
2. .prevent - 调用 event.preventDefault()，阻止事件默认行为。
3. .capture - 添加事件侦听器时使用 capture 模式。
4. .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
5. .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
6. .native - 监听组件根元素的原生事件。
7. .once - 只触发一次回调。
8. .left - (2.2.0) 只当点击鼠标左键时触发。
9. .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)  
   })
}