2018-09-21 vue

vue是什么?

vue是构建用户的框架(渐进式框架)

1、箭头函数和function区别或新增了哪些特性

箭头函数 :

⦁ 不能用于构造函数

⦁ 定义函数的时候需要var关键词,而var定义的变量不能会变量提升,所以箭头函数一定要定义于调用之前

  Function :

⦁ 传统定义的函数,this指向随着调用环境的改变而改变,而箭头函数中的指向则是固定不变,一直指向定义环境的

⦁ 由于js的内存机制,function的级别最高

2、set数据结构有哪些常用的属性和方法

  答:  Set方法:

⦁ add( ) : 添加成员到set中

⦁ delete( ) : 删除 返回boolean值 表示删除是否成功

⦁ has( ) : 包含 判断该值是否为set的成员 返回boolean值

⦁ clear( ) : 清除所有数据,没有返回值

⦁ keys( ) : 遍历键名

⦁ value( ) : 遍历键值

⦁ entries( ) : 遍历键值对

⦁ forEach( ) :便用回调函数遍历每个成员

Set结构的实例有以下属性:

⦁ Set.prototype.constuctor:构造函数,默认就是Set函数

⦁    Set.prototype.size:返回  size : 获取set的长度

3、map数据结构有哪些常用的属性和方法

  答:  NaN在map中是相等的

    属性 :

⦁ size : 获取set的长度

方法 :

⦁      set( ) : 添加 如果key值已存在,则值会被更新

⦁ get( ) : 获取map的数据

⦁ delete( ) : 删除

⦁ has( ) : 包含 某个键是否在当前map中

4、数据类型都要哪些?ES6中新增的数据类型是什么并介绍

  答: 数据类型:

⦁ number

⦁ boolean

⦁ string

⦁ null

⦁ undefined

⦁ object

⦁ symbol  Es6新增数据类型

    symbol是什么

          是一种类似于字符串的数据类型

介绍 :

⦁ Symbol函数前不能使用new命令

⦁ Symbol 是一个原始类型的值,不是对象,所以不能添加属性

⦁ Symbol 值可以显式转为字符串 和 boolean值,不能转数值。

⦁ Symbol 值作为对象属性名时,不能用点运算符。

⦁ 对象的内部,使用 Symbol 值定义属性时,Symbol 值必须放在方括号之中

⦁ Symbol 值作为属性名时,该属性还是公开属性,不是私有属性

5、基本数据类型和引用数据类型的区别

        基本数据类型:

⦁ Number、String 、Boolean、Null和Undefined。

⦁ 基本数据类型是按值访问的,因为可以直接操作保存在变量中的实际值。

(3)例:

      var a = 10;

  var b = a;

  b = 20;

  console.log(a); // 10值

  B 赋值a , 所以b 的改变对a 没影响

      引用数据类型

    (1)对象类型Object type,比如:Object 、Array 、Function 、Data

    (2)引用数据类型是保存在堆内存中的对象。

    (3)与其他语言的不同是,你不可以直接访问堆内存空间中的位置

  操作堆内存空间。只能操作对象在栈内存中的引用地址。

    所以,引用类型数据在栈内存中保存的实际上是对象在堆内存中的引用地址。通过这个引用地址可以快速查找到保存中堆内存中的对象。

6、 数组有哪些扩展的常用方法

    扩展运算符

⦁ 扩展运算符(spread)是三个点(...)替代函数apply方法

  方法复制数组:

数组是复合的数据类型 , 只是复制了指向底层数据结构的指针,而不是克隆一个全新的数组。例:const a2=a1;

⦁ 合并数组 :[…arr , …arr1]

⦁ 与解构赋值结合 :  [a , …arr1]=list

⦁ 字符串 […”hello”]  / / [”h” , “e” ,”l” ,”l” , “o”]

⦁ Map和set结构,Generator

⦁ Array.form( ):用于将两类对象转为真正的数组:类似数组的对象 可遍对象

⦁ Array.of( ) 将一组值,转换为数组

⦁ copyWithin( ) 将指定位置的成员复制到其他位置(会覆盖原有成员)

target(必需):从该位置开始替换数据。负值=倒数。

start(可选):从该位置开始读取数据,默认 0。负值=倒数。

end(可选):到该位置前停止读取数据,默认=length负值=倒数

⦁ find( ) 用于找出第一个符合条件的数组成员

⦁ findIndex ( ) 返回第一个符合条件的数组成员的位置

                        所有成员都不符合条件,则返回-1

⦁ fill( ) 使用给定值,填充一个数组

⦁ entries( ) 对键值对的遍历

⦁ keys( ) 对键名的遍历

⦁ values( ) 对键值的遍历

⦁ includes( ) 表示某个数组是否包含给定的值,与字符串includes方法类似

数组的空位:

⦁ Array.from方法会将数组的空位,转为undefined

⦁ 扩展运算符(...)也会将空位转为undefined。

⦁ copyWithin()会连空位一起拷贝。

⦁ fill()会将空位视为正常的数组位置。

⦁ for...of循环也会遍历空位。

⦁ entries()、keys()、values()、find()和findIndex()会将空位处理成undefined。

7、对象有哪些扩展的常用方法

      属性:

⦁ name返回函数名

      方法:

⦁ Object.js( ) 两个值是否相等

=同于相等运算符(==)和严格相等运算符(===)

不同之处只有两个:一是+0不等于-0,二是NaN等于自身。

⦁ Object.assign( ) 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

undefined和null无法转成对象

⦁ Object.keys返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。

⦁ Object.values方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。

⦁ Object.entries方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。

    属性的遍历

(1)for...in

循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。

⦁ Object.keys(obj)

返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。

⦁ Object.getOwnPropertyNames(obj)

返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名。

⦁ Object.getOwnPropertySymbols(obj)

返回一个数组,包含对象自身的所有 Symbol 属性的键名。

(5)Reflect.ownKeys(obj)

返回一个数组,包含对象自身的所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举。


8、介绍一下Promise是什么?分别阐述Promise有什么特点、缺点?

  答:

        Promise是什么:

                 是异步编程的一种解决方案

        特点:

⦁ 对象的状态不受外界影响 

  pending(执行中)

                Resolved(成功,又称Fulfilled)

                rejected(拒绝)

              (2)一旦状态改变,就不会在变,任何时候都可以得到这个结果

        缺点:

⦁ 无法取消Promise,一旦新建它就会立即执行,无法中途取取消

⦁ 如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。

⦁ 当处于Pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

9、Promise常用方法有哪些及作用是什么?

      方法:

⦁ Promise.then( ) 用来跟这个 promise 进行交互的

⦁ Promise.all( ) 可以接收多个 promise 作为参数,以数组的形式

⦁ Promise.catch( ) 当一个 promise 被拒绝(reject)时,catch 方法会被执行

⦁ Promise.race( ) 是一个有趣的函数——它不是等待所有的 promise 被resolve 或 reject,而是在所有的 promise 中只要有一个执行结束,它就会触发

10、怎么让一个函数无论promise对象成功和失败都能被调用?

  答:

⦁ finally方法用于指定不管Promise对象最后状态如何,都会执行的操作

⦁ resolve和reject都指定同一个函数不就好了 也就是

⦁ 在两个回调中分别执行一次函数。

11、 get和post有什么区别?

  Get :

      (1):从服务器上获取数据

(2)是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到

(3):服务器端用Request.QueryString获取变量的值

(4):传送的数据量较小,不能大于2KB

(5):安全性非常低

  Post :

      (1):向服务器传送数据

      (2):post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

      (3):服务器端用Request.Form获取提交的数据

      (4):传送的数据量较大,一般被默认为不受限制

      (5):安全性较高

1) 什么情况下回发生跨域?如何解决?

  答:情况:

       A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容。由于安全原因,跨域访问是被各大浏览器所默认禁止的。

解决:

(1):JSONP的get方式

ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域。

(2):“Asscee-Control-Allow-Origin”

1) 请写出数组去重代码

var  kong = [];

for(var i=0;i

if(kong.indexOf(arr[i]) == -1){

kong.push(arr[i]);

}

}

document.write(kong);

1) 简述MVVM和MVC

答:

MVVM :数据模型的数据双向绑定。

viewModel是一个同步view和model的对象。

model和viewmodel之间的交互是双向的

MVC 

  controller(业务逻辑)存在的目的是确保  Model (业务模型)  和 View(用户界面)的同步。M改变V同步更新

1) 简述虚拟DOM

对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作

虚拟DOM的缺点:

1. 代码更多,体积更大

2. 内存占用增大

3. 小量的单一的dom修改使用虚拟dom成本反而更高,不如直接修改真实dom快

1) computed和watch区别

watch是观察是一个动作;  computed是一个计算的属性

watch能监听vue数据  compute本来就是响应的,且自动更新

1) 列举常用指令

v-html    解析标签

v-show  控制DOM元素显示隐藏

v-if      控制添加或删除DOM元素

v-for    循环

v-on    用来调用事件的方法    @

v-bing    绑定事件  :class=’’

v-model  绑定数据

1) v-if和v-show的区别及使用场景

答:共同点 :

都是动态显示DOM元素

    不同点:

v-if

v-if  是动态的向DOM树内添加或删除DOM元素;

v-if切换一个局部编译/卸载的过程,切换时合适销毁和重建内部事件监听和子组件;

v-if是惰性的,初始条件=假,什么也不做。只有在条件第一次变=真,才开始局部编译;

v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留;

v-if有更高的切换消耗;

使用场景:v-if适合运营条件不大可能改变;

v-show

v-show有更高的初始渲染消耗;

v-show只是简单的基于css切换;

v-show是通过设置DOM元素的display属性控制显隐;

使用场景:v-show适合频繁切换。

1) 组件特性及好处

特性:

1 . 重用性

2 . 可指定性

3 . 互操作性

4 . 高内聚性

5 . 低耦合度

好处:

      1 . 提高开发效率

2 . 方便重复使用

3 . 简化调试步骤

4 . 提升整个项目的可维护性

5 . 便于协同开发

1) 组件的基本组成

1 . 样式结构

2 . 行为逻辑

3 . 数据

1) 父传递子如何传递

答:

父:自定义属性名 + 数据(要传递)=> :value="数据"

子:props ["父组件上的自定义属性名“] =>进行数据接收

1) 子传递父如何传递

答:

  子:this.$emit('自定义事件名称', 数据)  子组件标签上绑定@自定义事件名称='回调函数'

    父:methods: {    回调函数() {      //逻辑处理  }  }

1) 兄弟组件如何通信

答:

  通过中央通信 let  bus  =  new  Vue()

          A:methods :{ 函数{bus.$emit(‘自定义事件名’,数据)}  发送

          B:created (){bus.$on(‘A发送过来的自定义事件名’,函数)}  进行数据接受

1) Props验证类型都有哪些

  答: String  Number  Boolean  Function  Object  Array  Symbol

1) keep-alive是什么?

包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们

它自身不会渲染一个 DOM 元素,也不会出现在父组件链中

1) 生命周期共有几个?分别在什么时候使用?

beforeCreate : 创建前  选项对象 el data 都并未初始化

Created  :创建后  完成了data的初始化  el没有

BeforeMount    挂载前  完成了el和data初始化

Mounted  挂载结束 模块中的HTML渲染到HTML页面中  只会执行一次

BeforeUpdate 更新前  发生在虚拟DOM重新渲染和打补丁之前

Update  更新后  可执行依赖DOM

BeforeDestroy  销毁前

Destroy  销毁后  所有东西、事件、子实例都会解绑定

1) created和mounted区别

created: 创建后  完成了data的初始化  el没有

mounted: 挂载结束 模块中的HTML渲染到HTML页面中  只会执行一次

1) 什么是Vue-router

答:路由是根据URL分配到对应的处理程序

1) Vue-router共有几种模式?默认是哪种?

答:hash模式

history模式  默认

1) 嵌套路由使用哪个关键字?

答: :to=‘/父路由的地址名字/要去的子路由的名字’

子路由关键属性children

1) 重定向用哪个属性?

答:redirect:‘./goods’

1) router-link常用配置项有哪些?

答  配置 tag 属性生成别的标签   to 属性指定目标地址

路由钩子函数共有几种?分别是什么?参数to、from、next分别是什么意思?

全局钩子函数  : beforeEach  每次每一个路由改变的时候都得执行一遍

组件内的钩子函数  :

beforeRouteEnter 路由之前调用

beforeRouteUpdate 复用时调用

beforeRouteLeave  离开路由时调用

to: (Route路由对象)  即将要进入的目标 路由对象     

from: (Route路由对象)  当前导航正要离开的路由

next: (Function函数)   一定要调用该方法来 resolve 这个钩子

⦁ Vuex是什么?

答  是一个专为 Vue.js 应用程序开发的状态管理模式,管理所有的

2、Vuex有什么好处?及使用场景

答:好处:

      可以做状态管理  采用localstorage保存信息,数据便一直存储在用户的客户端中

    使用场景:适合在巨大后复杂的项目中使用/

3、介绍Vuex的核心概念及其作用

核心概念: State    Getter    Mutation  Action    Module

作用: 组件之间的数据通信  使用单向数据流的方式进行数据的中心化管理

详述Vuex运行机制

答:Vuex的状态存储是响应式的,当Vue组件从store中读取时,若store中状态发生改变,响应的组件也会更新状态。但不能直接改变state,必须通过显示的提交(commit)mutations来追踪每个状态的变化。

1) axios安装步骤

答    npm inst all axios

npm install --save axios vue-axios  全局的

1) axios常用的请求方式有哪些?

答 :

axios(config)

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

1) 简述axios并发请求

答:axios.all([]) 返回的结果是一个数组,使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2

你可能感兴趣的:(2018-09-21 vue)