computed和watch的区别
computed是计算属性,依赖其他属性计算值,并且computed的值有缓存,只有当计算值变化才会返回内容.
watch监听到值的变化就会执行回调,在回调中可以进行一些逻辑操作.
所以一般来说需要依赖别的属性来动态获得值的时候可以使用computed,对于监听到值的变化需要做一些复杂业务逻辑的情况可以使用watch.
闭包
闭包就是能够读取其他函数内部变量的函数.闭包的作用就是保存自己的私有变量,通过提供的接口给外部使用,但外部不能直接访问该变量.
原型链
javascript是面向对象的,每个实例对象都有一个__proto__属性,该属性指向它的原型对象,这个实例对象的构造函数有一个原型属性prototype,与实例的__proto__属性指向同一个对象.
var、let和const之间的区别
var声明变量可以重声明,而let不可以重复声明。
var是不受限于块级,而let是受限于块级。
var会与window相映射(会挂一个属性),而let不与window相映射。
var可以在声明的上面访问变量,而let有暂时性死区,在声明变量的上面访问变量会报错。
const声明之后必须赋值,否则会报错。
const定义不可变的量,改变了就会报错。
const和let一样不会与window相映射,支持块级作用域,在声明的上面访问变量会报错。
怎样理解vue的单向数据流
- 数据从父级组件传递给子组件,只能单向绑定。
- 子组件内部不能直接修改从父级传递过来的数据。
- 子组件想修改时,只能通过$emit派发一个自定义事件,父组件接收到后,由父组件修改.
前端性能优化的建议
- 减少http请求
- 使用http2
- 使用服务端渲染
- 静态资源使用CDN
- 将css放在文件头部,js文件放在底部
- 使用字体图标iconfont代替图片图标
- 善用缓存,不重复加载相同的资源
- 压缩文件
- 图片优化
- 通过webpack按需加载代码,提取第三方库代码,减少ES6转化为ES5的冗余代码.
- 减少重绘重排
- 使用事件委托
vue路由实现模式,hash模式和history模式
1.hash模式,在浏览器中符号"#",#以及#后面的字符称之为hash.
用window.location.hash读取,特点:hash虽然在URL中,但不被包括在HTTP请求中,用来指导浏览器动作,对服务端安全无用,hash不会重加载页面.
2.history模式,history采用HTML5的新特性,且提供了两个新方法.
(1).pushState()
(2).replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更.
vue-router的导航钩子
vue-router提供的导航钩子主要用来拦截导航,让它完成跳转或取消.
//定义一个路由
const router =new VueRouter({...})
//点击导航前调用
router.beforeEach((to,from,next)=>{})
//点击导航后调用
router.afterEach(route=>{})
对SPA单页面的理解,它的优缺点分别是什么?
单页web应用(简称SPA)是一种特殊的web应用,它将所有的活动局限于一个web页面中,仅在该web页面初始化时加载相应的html,JavaScript和css.一旦页面加载完成了,SPA不会因为用户的操作而重新加载或跳转,取而代之的是利用JavaScript动态的变换HTML的内容,从而实现UI与用户的交互,由于避免了页面的重新加载,SPA可以提供较为流畅的用户体验.
优点:
- 无刷新界面,给用户体验原生的应用感觉
- 节省原生app开发成本
- 提高开发效率,无需每次安装更新包
- 容易借助其他知名平台营销和推广
- 符合web2.0的趋势
缺点: - 效果和性能确实和原生有较大差距
- 各个版本浏览器的版本兼容性不一样
- 业务随着代码量增加而增加,不利于首屏优化
- 某些平台对hash有偏见,有些甚至不支持pushstate
- 不利于搜索引擎抓取
v-show与v-if有什么区别
v-show和v-if都能控制元素的显示和隐藏
v-show本质是通过设置css中的display设置为none,控制隐藏
v-if是动态的向DOM树内添加或者删除元素.
Vue的双向数据绑定
Vue.js是采用数据劫持结合发布者-订阅者的方式,通过Object.defineProperty来劫持各个属性的getter、setter,在数据变动时发布消息给订阅者,触发相应的监听回调。
Vue生命周期
- beforeCreate
在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。 - created
实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见 - beforeMount
在挂载开始之前被调用,相关的render函数首次被调用 - mounted
el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子,如果root实例挂载了一个文档内元素,当mounted被调用时vm.$el也在文档内 - beforeUpdate
数据更新时调用,发生在虚拟DOM打补丁之前,这里适合在更新之前访问现有的DOM比如手动移除已添加的事件监听器,该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行 - updated
由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子 - beforeDestroy
实例销毁之前调用,在这一步,实例仍然完全可用,该钩子在服务器端渲染期间不被调用 - destroyed
vue实例销毁后调用,调用后,vue实例指示的所有东西都会解绑定,所有的事件监听器都会被移除,所有的子实例也会被销毁.该钩子在服务器渲染期间不被调用.
echarts的基本用法
- 初始化类
html里面创建一个id为box1的div,并初始化echarts绘图实例
var myChart=echarts.init(document.getElementById('box1'))
- 样式配置
- title:标题
- tooltip:鼠标悬停气泡
- xAxis:配置横轴类别,type类型为category类别
- series:销售数量,data参数与横轴一一对应,如果想调样式,也可以简单调整,比如每个条形图的颜色可以通过函数进行数组返回渲染.
- 渲染图展示表
myChart.setOption(option)
为什么会出现跨域问题?前端如何解决跨域问题?
跨域:浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制,防止他人恶意攻击网站.
前端解决跨域问题的方法:
- jsonp
原理:动态创建一个script标签,利用script标签的src属性不熟同源策略的限制.因为所有的src属性和href属性都不受同源策略的限制,可以请求第三方服务器数据内容. - cors
- 反向代理
- window+iframe
列举三种强制类型转换和两种隐式类型转换
强制:
转化为字符串toString()String()
转化为数字Number()parseInt()parseFloat()
转换为布尔型Boolean()
隐式:
拼接字符串 :var str=""+18
- / % === ==
vue-router传递参数分为两大类:
- 编程式导航router.push
- 声明式导航
query和params的区别,query相当于get请求,在页面跳转的时候,可以在地址栏看到请求参数,然而params则相当于post请求,参数不会在地址栏中显示,但是刷新页面之后参数会消失,可以使用localStorage进行存储.
MVVM和MVC区别是什么?哪些场景适合?
- 基本定义
1.1 MVVM基本定义
MVVM即Model-View-ViewModel的简写,即模型-视图-视图模型,模型指的是后端传递的数据,视图指的是所看到的页面,视图模型是mvvm模式的核心,它是连接view和model的桥梁,它有两个方向:一是将模型转化为视图,即将后端传递的数据转化成所看到的页面,实现的方式是数据绑定.二是将视图转化为模型,即将所看到的页面转化为后端的数据.实现的方式是:DOM事件监听,这两个方向都实现的,我们称之为数据的双向绑定.
1.2 MVC基本定义
MVC是Model-View-Controller的简写,即模型-视图-控制器,M和V指的意思和MVVM中的M和V意思一样,C即Controller指的是页面业务逻辑,使用MVC的目的就是将M和V的代码分离.MVC是单向通信,也就是View跟Model,必须通过Controller来承上启下. - 使用场景
主要就是MVC中的Controller演变成MVVM中的viewModel,MVVM主要解决了
MVC中大量的DOM操作使页面渲染性能降低,加载速度变慢,影响用户体验,vue数据驱动,通过数据来显示视图层而不是节点操作,场景,数据操作比较多的场景,需要大量操作DOM元素时,采用MVVM的开发方式,会更加便捷,让开发者更多的精力放在数据的变化上,解决繁琐的操作DOM元素. - 两者之间的区别
MVC和MVVM其实区别不大,都是一种设计思想,MVC和MVVM的区别并不是VM完全取代了C,只是在MVC的基础上增加了一层VM,只不过弱化了C的概念,viewModel存在的目的在于抽离Controller中展示的业务逻辑,而不是替代Controller,其他视图操作业务等还是应该放在Controller中实现,也就是说MVVM实现的业务逻辑组件的重用,使开发更高效,结构更清晰,增加代码的复用性.
Vue组件如何进行传值的?
- 父组件向子组件传递数据
父组件内设置要传的数据,在父组件中引用的子组件上绑定一个自定义属性,并把数据绑定在自定义属性上,在子组件添加参数props接收即可 - 子组件向父组件传递数据
子组件通过vue实例方法$emit进行触发并且可以携带参数,父组件监听使用@(v-on)进行监听,然后进行方法处理 - 非父子组件之间传递数据
3.1 引入第三方new vue 定义为eventBus
3.2 在组件中created中订阅方法eventBus.$on('自定义事件名',methods中的方法名)
3.3 在另一个兄弟组件中的methods中写函数,在函数中腹部eventBus订阅的方法eventBus.$emit('自定义事件名')
3.4 在组件的template中绑定事件(比如click)
vuex中的几个核心概念
- store 唯一的数据源
- state 数据源的某一次数据状态即快照
- mutation 同步修改state中的数据
- action 专门用来处理异步任务
- getter 类似于组件内部的computed计算属性