前端高频面试题总结

一： 你对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”和
process.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('我发送成功了');      
	},