02
28

发表于 • 被 443 人看爆

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的单向数据流

  1. 数据从父级组件传递给子组件，只能单向绑定。
  2. 子组件内部不能直接修改从父级传递过来的数据。
  3. 子组件想修改时，只能通过$emit派发一个自定义事件,父组件接收到后,由父组件修改.

前端性能优化的建议

  1. 减少http请求
  2. 使用http2
  3. 使用服务端渲染
  4. 静态资源使用CDN
  5. 将css放在文件头部,js文件放在底部
  6. 使用字体图标iconfont代替图片图标
  7. 善用缓存,不重复加载相同的资源
  8. 压缩文件
  9. 图片优化
  10. 通过webpack按需加载代码,提取第三方库代码,减少ES6转化为ES5的冗余代码.
  11. 减少重绘重排
  12. 使用事件委托

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可以提供较为流畅的用户体验.
优点:

  1. 无刷新界面,给用户体验原生的应用感觉
  2. 节省原生app开发成本
  3. 提高开发效率,无需每次安装更新包
  4. 容易借助其他知名平台营销和推广
  5. 符合web2.0的趋势
    缺点:
  6. 效果和性能确实和原生有较大差距
  7. 各个版本浏览器的版本兼容性不一样
  8. 业务随着代码量增加而增加,不利于首屏优化
  9. 某些平台对hash有偏见,有些甚至不支持pushstate
  10. 不利于搜索引擎抓取

v-show与v-if有什么区别

v-show和v-if都能控制元素的显示和隐藏
v-show本质是通过设置css中的display设置为none,控制隐藏
v-if是动态的向DOM树内添加或者删除元素.

Vue的双向数据绑定

Vue.js是采用数据劫持结合发布者-订阅者的方式,通过Object.defineProperty来劫持各个属性的getter、setter，在数据变动时发布消息给订阅者，触发相应的监听回调。

Vue生命周期

  1. beforeCreate
    在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
  2. created
    实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见
  3. beforeMount
    在挂载开始之前被调用,相关的render函数首次被调用
  4. mounted
    el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子,如果root实例挂载了一个文档内元素,当mounted被调用时vm.$el也在文档内
  5. beforeUpdate
    数据更新时调用,发生在虚拟DOM打补丁之前,这里适合在更新之前访问现有的DOM比如手动移除已添加的事件监听器,该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行
  6. updated
    由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子
  7. beforeDestroy
    实例销毁之前调用,在这一步,实例仍然完全可用,该钩子在服务器端渲染期间不被调用
  8. destroyed
    vue实例销毁后调用,调用后,vue实例指示的所有东西都会解绑定,所有的事件监听器都会被移除,所有的子实例也会被销毁.该钩子在服务器渲染期间不被调用.

echarts的基本用法

  1. 初始化类
html里面创建一个id为box1的div,并初始化echarts绘图实例
var myChart=echarts.init(document.getElementById('box1'))
  1. 样式配置
  • title:标题
  • tooltip:鼠标悬停气泡
  • xAxis:配置横轴类别,type类型为category类别
  • series:销售数量,data参数与横轴一一对应,如果想调样式,也可以简单调整,比如每个条形图的颜色可以通过函数进行数组返回渲染.
  1. 渲染图展示表
myChart.setOption(option)

为什么会出现跨域问题?前端如何解决跨域问题?

跨域:浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制,防止他人恶意攻击网站.
前端解决跨域问题的方法:

  1. jsonp
    原理:动态创建一个script标签,利用script标签的src属性不熟同源策略的限制.因为所有的src属性和href属性都不受同源策略的限制,可以请求第三方服务器数据内容.
  2. cors
  3. 反向代理
  4. window+iframe

列举三种强制类型转换和两种隐式类型转换

强制:
转化为字符串toString()String()
转化为数字Number()parseInt()parseFloat()
转换为布尔型Boolean()
隐式:
拼接字符串 :var str=""+18

  • / % === ==

vue-router传递参数分为两大类:

  1. 编程式导航router.push
  2. 声明式导航
    query和params的区别,query相当于get请求,在页面跳转的时候,可以在地址栏看到请求参数,然而params则相当于post请求,参数不会在地址栏中显示,但是刷新页面之后参数会消失,可以使用localStorage进行存储.

MVVM和MVC区别是什么?哪些场景适合?

  1. 基本定义
    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来承上启下.
  2. 使用场景
    主要就是MVC中的Controller演变成MVVM中的viewModel,MVVM主要解决了
    MVC中大量的DOM操作使页面渲染性能降低,加载速度变慢,影响用户体验,vue数据驱动,通过数据来显示视图层而不是节点操作,场景,数据操作比较多的场景,需要大量操作DOM元素时,采用MVVM的开发方式,会更加便捷,让开发者更多的精力放在数据的变化上,解决繁琐的操作DOM元素.
  3. 两者之间的区别
    MVC和MVVM其实区别不大,都是一种设计思想,MVC和MVVM的区别并不是VM完全取代了C,只是在MVC的基础上增加了一层VM,只不过弱化了C的概念,viewModel存在的目的在于抽离Controller中展示的业务逻辑,而不是替代Controller,其他视图操作业务等还是应该放在Controller中实现,也就是说MVVM实现的业务逻辑组件的重用,使开发更高效,结构更清晰,增加代码的复用性.

Vue组件如何进行传值的?

  1. 父组件向子组件传递数据
    父组件内设置要传的数据,在父组件中引用的子组件上绑定一个自定义属性,并把数据绑定在自定义属性上,在子组件添加参数props接收即可
  2. 子组件向父组件传递数据
    子组件通过vue实例方法$emit进行触发并且可以携带参数,父组件监听使用@(v-on)进行监听,然后进行方法处理
  3. 非父子组件之间传递数据
    3.1 引入第三方new vue 定义为eventBus
    3.2 在组件中created中订阅方法eventBus.$on('自定义事件名',methods中的方法名)
    3.3 在另一个兄弟组件中的methods中写函数,在函数中腹部eventBus订阅的方法eventBus.$emit('自定义事件名')
    3.4 在组件的template中绑定事件(比如click)

vuex中的几个核心概念

  1. store 唯一的数据源
  2. state 数据源的某一次数据状态即快照
  3. mutation 同步修改state中的数据
  4. action 专门用来处理异步任务
  5. getter 类似于组件内部的computed计算属性