2021-04-21

1,指令

一、v-text

用于渲染普通文本，无论何时，绑定的数据对象上 msg属性发生了改变，插值处的内容都会更新。

二、v-html

如果你想输出真正的 HTML，你需要使用 v-html指令，v-text仅渲染标签，不能解析 HTML 代码。

v-text展示效果： **《string》Hello《string》 Vue!

v-html展示效果： Hello《/string》** Vue!

总结：v-text和{{}}表达式渲染数据，不解析标签。

v-html不仅可以渲染数据，而且可以解析标签。

三，v-if,v-show

动态的向dom添加或者删除元素，v-show是通过设置dom元素的display样式属性控制显示隐藏

v-if适合运营条件不太可能改变，v-show适合频繁切换

性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗

2,过滤器

文本过滤器 主要是用来插值，

过滤器是对将要显示的文本做进一步的筛选处理，他不会改变原来的文本

我们在平时也会用到，比如现在我们拿到一个数据，而我们只要这个数据其中的一个数据，这时候就可以用到过滤了，把我们需要用的数据过滤出来，

全局过滤：vue.filter（否特尔）(“过滤器名”，function(val){

逻辑代码

})

局部过滤：filter:{

​ 过滤器名：function(参数){

逻辑代码

}

}

具体使用

使用插槽外带 |filtime |（管道符）+过滤器名放在需要转换的时间边

filters: {
filtime(val) {
return new Date(val * 1000).toLocaleString();
},
//对创建时间进行过滤
},

3,箭头函数和普通函数的区别

1、 this指向问题指向的是定义它的对象普通函数指向的是它的直接调用者

2、不可以使用 arguments（奥给们四） 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

3、因此箭头函数不能用作Generator （杰呢v特）函数。

4、不可以使用 new 命令，因为没有自己的 this，无法调用 call，apply。

4,paramise

promise是一种解决异步的方案他其实是一个构造函数他里面有两个参数（resolve,reject）

他又三个状态1，进行中（pending）2,已成功状态（fullfailed）3,以失败状态（rejected）

调用resolve方法会把进行中的状态转换为已成功状态，然后用.then输出这个，

调用reject方法会把进行中的状态转换为以失败状态，然后用.catch输出这个

具体代码：

var promise=new promise((resolve,reject)=>{
	if(ture){
		resolve("接受成功的数据")
	}else{
		reject("接受失败的数据")
	}
}).then(data=>{
	输出接受到的成功的数据 data
}).catch(err=>{
	输出接受到失败的数据 err
})

5,数据类型

数据类型分为：

1，基本数据类型：string number boolean null undefined symbol（森bou）存放在栈中

2,引用数据类型：array object function 存放在堆中

如何判断他们

1,typeof:可以判断数据类型，但无法区分array object null 等数据类型因为返回值都是object

2,instance 判断new关键子创建的引用数据类型 但是null和undefined不可以判断已字面量创建的基本数据类型

3，constructor(康斯chua可特) 可以判断基本数据类型和引用数据类型 但构造函数内部原型指向发生改变就无法区分数据类型

5，object.property（普绕普忒）.tostring.call（口而）() ,通过调用call()函数帮助判断是什么类型，但是不可以判断自定

类型

6,响应式布局

1，百分比布局：利用对属性设置百分比来适配不同的屏幕，百分比都相对于父元素，

可以设置百分比的有宽高，内外边距，

2，媒体查询：利用媒体查询设置不同分辨率下的css样式，来适配不同屏幕

3，rem是css3新增的单位，移动端的支持率很高，若用rem布局只要根据容器的大小动态改变fontsize

4,vw视口单位根据html下的fontsize的值*100文件宽度和高度来获取vw和vh

5,利用flex属性对页面进行布局

flex-direction:决定项目的排列方向。

flex-wrap**（外普）**:即一条轴线排不下时如何换行。

flex-flow:是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify(加斯特 佛哎)-content:定义了项目在主轴上的对齐方式。(justify)

align-items:定义项目在交叉轴上如何对齐。

align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。(换行会产生多轴

7,let const var 的区别

let和const具有块级作用域，而var不存在块级作用域

var 存在变量提升，let不存在变量提升

let和const不能声明同名的变量

var和let可以不用设置初始值，const必须要设置初始值

var声明的变量会挂在window上，而let和const不会

8,rem

原理：屏幕的宽度除于文稿的宽度*100，通过rem+js改变根元素fontsize大小来实现兼容性更高的页面，他的缺点是必须通过js动态控制字体大小，js与css有一定的耦合性，必须要把改变字体大小的代码放在css之前

9,原型与原型链

原型有五条规则：

1，所有的引用类型都可以自定义添加属性

2，所有的引用类型都有自己的隐式原型（proto）

3,函数都有自己的显示原型（prototype）

4,所有的引用类型的隐式原型都指向构造函数的显示原型

5，使用引用类型的自定义属性时，如果没有这个属性就去他的proto中寻找

原型链：

对象访问自己不存在的属性和方法时会先在对象中寻找，找不到就在对象的原型中寻找

，找到就用找不到就在原型的原型中寻找，直到找到或者报错为止，这个寻找的过程就形成了

原型链

10，闭包

当一个函数的返回值是另一个函数时，而返回的那个函数如果调用了父函数的变量

而且这个函数在外部被执行了，这样就产生了闭包

他的特性：1，函数套函数2，内部函数可以直接访问外部函数的变量

优点是：变量一直在内存中，避免全局污染，私有成员存在

缺点是：夫函数每调用一次就产生一个闭包，内存不能及时释放

11，深拷贝与浅拷贝

深拷贝：深克隆，深复制，拷贝的是对象和值都拷贝过来，拷贝后的对象与原来的对象是分离的，

互不影响，一个改变另一个不会改变

实现：递归的方法，还有object.assgin（二赛），扩展运算符，array（二瑞）.prototype（普肉特泰普）.splice()

浅拷贝：浅复制，浅克隆，拷贝的是对象的引用地址，因为他们两个都用的是同一个引用地址，

所以修改其中一个，另外一个也会被修改

实现：for in 和延展操作符

12，事件冒泡，事件捕获

事件的概念：点击某个内容，或者鼠标放在某个元素上，或者键盘按键点击触发的

事件流：就是页面接受事件的顺序，它分为事件冒泡流和事件捕获流

事件冒泡：是从最具体的元素接受，然后一层一层向上传播到较为不具体的节点

因为冒泡有时候会影响我们的页面，所以有时候我们会阻止冒泡 ，阻止冒泡vue用@事件.stop

jq的话用e.stoppropagation

事件捕获：最不具体的节点会先接受到事件，而最具体的元素会最后接受到

13，h5,css3新增属性

h5:

1,语义化标签：header，footer

2,增强性表单：input多了个type

3,新增表单元素：output

4,新增表单属性：min和max

5,托拽

6，canvas地理定位

7，本地存储：localstorage没有事件限制，sessionstorage针对一个数据保存，浏览器关闭数据会丢失

css3：

1，选择器

2，背景边框

3，盒子阴影透明度

4，转换

5，动画过渡

6，布局

7，媒体查询

14，本地存储

在h5之前一直都用cookie但是因为他只能存储4kb的数据，所以又增加了localstorage和

sessionstorage存储，

sessionstorage大小为5mb,他只能保存字符串类型的字符串，所以有时候会把对象通过

JSON.stringIFy转换成字符串类型才能使用，而且它存储的数据是暂时性的浏览器关闭就会自动删除

相对于他们来说localstorage还是比较好的，大小也为5mb，也不会被发送到服务端，浏览器关闭数据也不会消失，所以一般我们都常用localstorang保存数据

15，懒加载

商城页面内容比较丰富，图片也比较多，如果一次性加载完，页面加载的会比较慢，也影响

用户体验，所以我们要使用懒加载减轻服务器的压力，同时也提高用户的体验度，

具体懒加载的操作时，刚开时不会将图片放在src属性中，而是放在其他属性中（data.original)中

这是会有用一个同一的占位符站好位置，当页面加载完成过后，滑动页面到可视区域时，就会把

src把他从刚才的属性中取出来进行赋值，

16，瀑布流

通过对比每一列的高度，如果这一列低的话就在后面添加，首先每一列的高度都是需要自适应的

，不能设置高将每一列撑起来，而且有的时候，页面的整体高度和页面可视高度加上滚动高度差1px，这个时候我们就需要提前加载，不然滑动到底部也加载不出来

17，结构赋值

es6允许按照一定的模式，从对像和数据中进行取值，然后对变量进行赋值，左右结构必须保持一直

let {obj,item}={obj:aaa;item:456}

比如说现在页面需要一个button按钮，如果使用element-ui的话全局引入就比较消耗资源，这是我们就可以使用结构赋值，进行局部引入，这样就可以节省资源，减轻服务器压力

18，async/await

async和await是一种同步的写法，但执行的是异步的操作，他们两个必须同时写才会有效，

当遇到await是就会停止，await接受到数据之后才会执行后面的js代码，而写awaie接受的必须是一个

promise对象，所以async和await主要是解决不同机制下的异步问题

19,es6扩展

1，新增块级作用域:let和const

2，提供定义类的语法糖

使用class创建实例的时候必须使用new，普通的构造函数可以省略

在前面加一个class，他就有构造实例的能力，并且constructor（康斯chua可特）中每个通过他创造出来的实例都可以获得属性，咋constructor外面放的是获得的方法，

3，新增结构赋值

介绍：数组结构可以让我们通过左右一致的关系从他里面进行取值

允许使用变量的名字匹配对象的属性，

4，新增箭头函数

介绍：简单方便直接（）=》{}就可以了

不允许直接存在必须作为值存在

没有自己的this，用的是外层函数的函数

一般来说箭头函数用在回调函数上比较彷便

5，数组新增api(isarray/from/of)

6,数组和对象新增扩展运算符

介绍：一般用。。。标识

可以把数组和对象展开

7，新增模块化

介绍：1，在语言标准的层面上，实现了模块功能2，尽量静态化，3，定义了模块export（爱克斯泡特）语法4，加载模块import语法

8，新增set和map数据结构

介绍：set:它类似于数组不过他里面的值是唯一的所以，一般都常用于去重，他里面的add是添加某个值，delete:删除某个值

map:他key的类型可以是任何值，map.set是设置一个值，map.get是获取一个值，msp.delete删除一项

9，新增生成器和遍历器

20，封装promise的api

第一步：先创建三个文件夹，核心，配置，入口

第二步：在核心文件中，先创建一个axios实例，先判断是生产环境或开发环境，

里面配置baseurl公共路径和timeout超时器，判断是get请求或者是post请求，然后写请求拦截和相应拦截

第三步：在配置文件中，封装请求的接口和请求的路径

第四步：把上面两个文件引入入口文件中，在一个对象中封装方法，然后暴露出这个对象

最后把入口文件引入到全局中

21,for in for of

for in循环的是对象，for of 循环的是数组

for in 循环后的结果是key值，for of 循环后的结果是value值

for of 不能循环普通的对象，必须通过object.keys使用

for of 是es6新增的，他弥补了for的不足

22,跨域

先说什么是跨域：浏览器不允许当前页面所在的源去请求另外一个源的数据，这里的源

指的是（域名，端口号，协议）只要这三个有一个不同就为跨域

解决跨域：

jsonp跨域：利用src不存在跨域的特性，使用js创建script，动态设置src的值

服务器代理跨域：通过http-proxy（普绕可c）-middleware（买的完儿）插件实现，我们现在常用的就是在config.js中

在proxy属性中设置跨域

module.exports(爱克斯跑死)={

devserver;{

proxy（泡壳c）:’’

}

}

cors(库四):在服务端设置res.setheader(‘access（艾克赛四）-control（康出）-allow（二老）-origin(奥瑞今)’,’*’)

23， methods（买佛二四）,computed（卡姆piu忒特）, watch 的区别

他们是我们使用vue经常用到的，

computend和methods都是对data里面的属性进行加工在输出

computend和watch内部都是使用watcher来实现的

computed:是计算属性计算的结果会缓存，而他改变主要是依赖值

发生改变的时候才会改变，methods：是事件方法我们要用的事件都在这里面执行，他执行一次就调用一次，不会被缓存，watct:监听属性，主要是监听一个值得变化，他里面有两个参数（newvalue）和（oldval）newvalue是值变化前，oldvalue是值变化后的，我们可以利用一般都是通过监听一个值的变化来做一些逻辑代码

24，prop验证

props:会接受不同类型的值：我们常用类型有：number(数值),string（字符串）,function（函数）,array（二瑞）（数组）,object（对象）,boolean（布尔值）

required(瑞块页尔特):为必须要传的，

default（第否特）:any 为props指定一个默认值，如果prop没有被传入就换做用这个值

validator（ruai 泪dater）：Function自定义验证函数会将该 prop 的值作为唯一的参数代入

25，数据双向绑定

先说：v-model

1，利用指令解析：根据v-model指令模板替换数据，绑定相应的更新函数

2，object.defineproperty（）给所有属性添加set()和get()方法，通过监听器如果set发生改变

发送消息给订阅者者，然后调用get方法（）

3，watcher收到每个属性变动的通知，执行绑定的回调函数，更新视图w

26，组件传值

组件传值分为：父传子，子穿父，还有兄弟组件之间传值

父传子：在父组件中给子组件一个属性，属性上挂载需要传递的值，在子组件中通过

props[]来接收，

子穿父：在父组件中给子组件一个事件事件上挂载需要传递的方法，在子组件用，

this.$emit（“自定义事件名”，需要传递的值）来传递

兄弟组件传值：新建一个空的vue实例eventBUS,通过BUS.$emit（“时间名”）传到空的

vue实例中，在通过BUS.$on(“事件名”，（参数）=》传递来的数据)来接收

也可以通过vuex实现

27，生命周期

beforcreate:初始化事件还未开始（data,watch,methods一类的数据都不能访问）

created:创建后，初始化事件完成(data,watch,methods,)上的方法和数据可以被访问，$el属性还没有显示出来

beformount:挂载前，把data里面的数据和模板生成html，不过现在还没有将html挂载到页面上

mounted:挂载后，用上面编译好的html内容替换el属性指向的dom对象，完成模板中的html渲染到

html页面上

beforeupdate:更新前：发生在虚拟dom重新渲染和打补丁之前，可以在他里面进一步的更改状态

updated:更新后，发生在虚拟dom渲染和打补丁之后，调用时组件dom已经更新,所以可以执行依赖于dom的操作

activated:子组件在每次加载的时候需要进行某些操作，可以是用activated触发

deactivated:组件被移除的时候使用

befordestroy:实例在销毁之前调用，实例依然可用

destroyed:销毁后，所有的事件监听器都会被移除，所有的子实例也会被销毁。

28，vuex

是vue的状态管理工具，里面可以存放数据，外面所有组件都可以使用这里面的数据

state:里面存放着公共的数据

mutation（mou 忒深）:对state里面的数据进行修该，在外面用this.$store.commit(“事件名”，要传的数据)

getters:计算属性对需要计算的数据将进行计算，返回值会缓存

actions（爱可深四）:异步操作 action提交的是mutation,而不是直接变更状态

modules:模块化状态管理，开发大型项目时，彷便管理使用

运行机制：

当组件的数据需要修改的时候先调用actions中的方法，他里面的每个方法中都会有一个commit方法，

当方法执行的时候会通过commit来触发mutations里面的方法进行修改，mutation每个函数中都有一个

（state）参数，所以当数据修改完毕后会传给页面，页面就1发生改变了

29,常用修饰符

@事件.stop 阻止冒泡

@事件 .prevent 阻止默认事件

@事件.comcaptrue 出发事件捕获

@事件.self 当事件在该元素本身是触发

@事件.once 只执行一次

30，包裹动态组件

概念：包裹动态组件时会缓存不活动的元素而不是销毁他们，它自身不会渲染出一个dom，也不会出现在父组件中

作用：在组件来回切换的过程中，把状态保存在内存中，防止重新渲染dom减少加载事件和性能小号

原理：在created函数调用时将需要缓存的VNode节点保存在this.cache（卡式）中，如果VNode中的name符合缓存条件，就会从this.cache中之前缓存的vnode实例进行渲染

31，虚拟dom，diff算法

dom：我们想要改变一个dom，直接用js时无法改变的，所以文档结构会虚拟出一个js对象，

这个js对象就代表虚拟dom,我们的vue修改某一项时，改的就是这个虚拟dom,然后把更在之前的

dom和更改之后的dom进行对比，然后把这个更改的节点转成dom操作，然后再去修改文档，

现在页面就变了

1，先说虚拟dom就是一个js对象2，我们的vue会把文档结构转换为一个js对象，我们在操作一个节点时，其实就是在操作这个虚拟出来的js对象，当某一个绑定的数据发生改变的时候，vue会拿刚的虚拟dom与旧的dom进行对比，然后利用diff算法把这个节点转换为dom操作，然后去修改真实的html结构，现在页面就改变了

32，3.0, 2.0区别

1，默认进行懒观察

2.0不管数据多大都会成为观察者，当数据太大是就会造成性能压力

3.0，只会对渲染出来的可见的数据创造观察者

2，更精准的变更通知

2.0新增属性时，所有都会重新运行，而3.0是只有依赖改变才会重新运行

3，3.0新加入了typescript以及PWA的支持

4，部分命令发生了改变

创建项目： vue create 项目名

启动项目：npm run serve

删除：vue list

5,默认项目目录结构发生改变

移除配置文件 config文件夹

移除state文件夹，新增public（怕不，雷可）文件夹

6，性能提升

7，api变动

8，重写虚拟dom

33，$nextTick()的作用

他是一个函数 因为js是单线程的，如果有多个任务需要执行，就会产生阻塞，所以我们需要一种非阻塞机制，非阻塞机制是一种异步机制，详述：所有同步任务都在主线程上执行，等待任务的回调结果

进入一种队列排序，会先执行主线任务，主线任务结束后才会执行刚排队的任务，所以就需要事件循环，现在就i要用到$nexttick,nexttick还会进行去重和计算，因为有可能会多次操做dom所以就要进行去重和计算，在下次事件循环时，拿到更新后的最新的dom

34，为什么data是一个函数

当我们将组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，拥有自己的作用域，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。

35，继承

1，原型链继承 ：让一个引用类型继承另一个类型的属性和方法被继承的实例化绑定在

继承者的原型上

2，借用构造函数继承：在子类型的构造函数中调用超类型的构造函数可以向超类型

传递参数

3，组合继承：是将原型链和借用构造函数的技术合并在一起，使用原型链实现了

对原型上属性和方法的继承，通过借用构造函数实现了对实例属性的继承

4，原型式继承：借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型。

5，寄生式继承：创建一个仅用于封装继承过程的函数， 该函数在内部已某种方式来增强对象，最后再返回一个跟他一样的对象。

6，寄生组合式继承：所谓寄生组合式继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法

37，object.defineproperty()

作用：是给对象添加属性的

他里面有三个参数：第一个是需要操作的对象，

第二个需要修改的属性名，第三个是：描述器

有两种内置方法，get和set函数实现双向数据绑定，广泛用于vue响应式原理和实现双向数据绑定

Vue的响应式原理：

在vue组件中定义在data里面的属性都为响应式属性，当data里面的属性发生改变也就是他的set属性改变，这时候就会触发监听者，监听者会立即通知渲染函数，会拿到该属性的get方法，然后生成新的虚拟dom，触发diff算法，渲染页面

38，自定义指令

通过directives创造一个属于自己的指令，

它里面有：五个钩子函数

bind：只调用一次，指令第一次绑定到元素时调用
inserted：音se忒de被绑定元素插入父节点时调用
update：所在组件的 VNode 更新时调用。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

局部：directives：{

自定义名字：{

里面是他的五个钩子函数：function(el,binding){

el:指令绑定的元素

binding:

}

}

}

39,ajax请求如何请求的

作用：在不加载页面的情况下，局部更新

1,先创建一个XMLhttprequest异步对象

var xhr=new httprequest、

2，初始化请求xhr.open(“方式”，“地址”，标识位)

3，设置头信息 xhr.setreruestheader("")

4,回调函数 xhr.onreadystatechange=function(){}

5,发送请求 xhr.send()