总结
一、使用vuejs进行开发
1、Vue
0、生命周期函数:(挂载,更新,销毁),
1、beforeCreate(),el和data还没有初始化
2、created(还没渲染成html,但是vue中(data)的实例已经初始化完了),不能直接操作真实dom(el),
中间还有el挂载,和模板渲染,虚拟dom更换真实dom
3、mounted (已完成模板渲染,完成数据挂载,通过render函数获取到真实dom,可以操作真实dom)能获取到dom节点
4、beforeDestroy 组件销毁之前 :注意,在这个生命周期函数里,需要把自定义的事件进行解绑,防止内存泄露,事件总线的off
注意:
1、初始化的时候先初始化父组件再子组件,
2、渲染的时候是先渲染子组件再渲染父组件。
0.1、vue的核心是:数据驱动(VM):通过数据变化直接修改BOM的展示,不用操作DOM
组件:把整体拆分成一个个可以复用的个体
当多个组件中逻辑相同的时候,可以用mixin抽离出来
1、watch属于组件对象的某一个属性,用于监听某一个属性的改变,当变化之后执行业务逻辑,
注意:(监听data中的属性或者props中传过来的属性值的是否发生变化,名字必须和属性名保持一致,
有newvalue和oldvalue两个参数,一般用newvalue,一旦值发生变化之后,可以自定义一个事件发生给父组件中进行处理)
1、watch可以深度监听:deep:true
2、在监听对象的时候,拿不到oldvalue的值
2、计算属性和watch的区别
计算属性:会自动监听当前值的变化,如果当前值变化的时候会返回一个回调,
1、有get和set的方法
用法:需要动态计算值的话,用计算属性,当需要值的变化之后执行业务逻辑再用watch
3、计算属性和方法的区别:
1、计算属性会缓存数据:会观察计算属性中的元素是否发生变化,如果没有变化的话,就会在直接返回回去,不会再次调用,多加了一层缓存
方法需要多次调用
2、methods是一个函数,可以接受参数,但是计算属性不可以接受参数
4、v-if会直接修改dom树上的节点(是按照条件进行渲染的),
v-show只是给元素加一个css的样式display:none,元素还在dom数上(按照css属性渲染)
5、v-for中的key值,是为了个每个节点都做一个标识,类似于给每条数据加一个索引,提升渲染的性能
拿key和值进行一一对应,更高效的更新虚拟dom,通过diff算法,会让真实dom和虚拟dom进行对比,找到不同的进行替换、修改
注意: v-for 和 v-if不能同时使用,v-for的运算优先级 大于 v-if
6、事件点击(
e
v
e
n
t
)
,
@
c
l
i
c
k
1
、
e
v
e
n
t
是
原
生
的
e
v
e
n
t
对
象
2
、
事
件
会
被
挂
载
在
当
前
d
o
m
上
7
、
事
件
总
线
(
可
以
带
参
数
)
,
可
用
于
不
同
组
件
中
的
事
件
传
递
(
涉
及
到
了
非
父
子
通
行
)
,
t
h
i
s
.
event), @click 1、event是原生的event对象 2、事件会被挂载在当前dom上 7、事件总线(可以带参数),可用于不同组件中的事件传递(涉及到了非父子通行) ,this.
event),@click1、event是原生的event对象2、事件会被挂载在当前dom上7、事件总线(可以带参数),可用于不同组件中的事件传递(涉及到了非父子通行),this.bus.xxx (需要在main中注册原型,事件总线可以用于非父子组件的通信,on/off(接收监听、移出监听)
8、native(监听原生事件),组件默认是不能监听点击的,如果想要监听组件点击事件,可以通过.native来监听组件根元素的原生事件(<back-top @click.native=“backClick” v-show=“isShowBack” />)
9、ref:(获取当前属性的dom)
1、当给组件设置了ref属性之后,可以通过this.
r
e
f
s
.
x
x
x
获
取
当
前
组
件
对
象
,
就
可
以
调
用
组
件
中
的
方
法
了
(
t
h
i
s
.
refs.xxx获取当前组件对象,就可以调用组件中的方法了(this.
refs.xxx获取当前组件对象,就可以调用组件中的方法了(this.refs.scroll.refresh)
2、ref如果绑定在普通的元素中,通过this.
r
e
f
s
.
x
x
x
获
取
到
的
当
前
绑
定
的
d
o
m
元
素
(
r
e
f
=
"
z
j
w
"
,
t
h
i
s
.
refs.xxx 获取到的当前绑定的dom元素(ref="zjw" ,this.
refs.xxx获取到的当前绑定的dom元素(ref="zjw",this.refs.zjw)
10、防抖(防止同一函数调用多次,可以判断在一定时间内是否是函数调用)/节流
11、css中属性,所有组件都有属性
e
l
,
可
以
用
于
获
取
组
件
中
的
元
素
−
−
d
i
v
s
p
a
n
,
(
t
h
i
s
.
el,可以用于获取组件中的元素--div span,(this.
el,可以用于获取组件中的元素−−divspan,(this.refs.tabControl2.
e
l
.
o
f
f
s
e
t
T
o
p
;
)
12
、
只
有
d
e
f
a
u
l
t
导
出
的
时
候
,
才
可
以
省
略
符
号
13
、
v
−
m
o
d
e
l
双
向
绑
定
,
相
当
于
v
−
b
i
n
d
(
动
态
绑
定
)
+
v
−
o
n
(
事
件
监
听
)
:
0
、
通
过
v
−
b
i
n
d
绑
定
一
个
v
a
l
u
e
属
性
,
v
−
o
n
指
令
给
当
前
的
元
素
绑
定
i
n
p
u
t
事
件
(
:
v
a
l
u
e
=
"
m
s
g
"
相
当
于
把
m
s
g
动
态
绑
定
到
i
n
p
u
t
中
的
v
a
l
u
e
值
上
(
v
−
b
i
n
d
)
)
1
、
自
定
义
v
−
m
o
d
e
l
:
父
组
件
将
v
−
m
o
d
e
l
属
性
用
在
子
组
件
上
,
就
是
通
过
改
变
子
组
件
中
的
值
来
双
向
修
改
父
组
件
的
值
(
就
是
将
v
−
m
o
d
e
l
放
在
组
件
上
)
,
首
先
在
子
组
件
上
定
义
一
个
m
o
d
e
l
属
性
定
义
一
些
属
性
(
p
r
o
p
、
c
h
a
n
g
e
)
,
p
r
o
p
的
值
必
须
一
一
对
应
注
意
:
1
、
子
组
件
中
使
用
:
v
a
l
u
e
来
接
收
值
2
、
子
组
件
中
的
c
h
a
n
g
e
和
m
o
d
e
l
属
性
中
的
c
h
a
n
g
e
对
应
3
、
可
以
通
过
e
v
e
n
t
函
数
获
取
到
i
n
p
u
t
里
面
输
入
的
v
a
l
u
e
值
(
e
v
e
n
t
.
t
a
r
g
e
t
.
v
a
l
u
e
)
2
、
就
是
在
v
−
b
i
n
d
(
:
v
a
l
u
e
(
)
)
的
基
础
上
,
加
了
一
个
v
−
o
n
的
改
变
事
件
13
、
t
h
i
s
.
el.offsetTop;) 12、只有default导出的时候,才可以省略{}符号 13、v-model双向绑定,相当于v-bind(动态绑定)+v-on(事件监听): 0、通过v-bind绑定一个value属性,v-on指令给当前的元素绑定input事件(:value="msg" 相当于把msg动态绑定到input中的value值上(v-bind)) 1、自定义v-model:父组件将v-model属性用在子组件上,就是通过改变子组件中的值来双向修改父组件的值(就是将v-model放在组件上), 首先在子组件上定义一个model属性定义一些属性(prop、change),prop的值必须一一对应 注意: 1、子组件中使用:value来接收值 2、子组件中的change和model属性中的change对应 3、可以通过event函数获取到input里面输入的value值(event.target.value) 2、就是在v-bind(:value())的基础上,加了一个v-on的改变事件 13、this.
el.offsetTop;)12、只有default导出的时候,才可以省略符号13、v−model双向绑定,相当于v−bind(动态绑定)+v−on(事件监听):0、通过v−bind绑定一个value属性,v−on指令给当前的元素绑定input事件(:value="msg"相当于把msg动态绑定到input中的value值上(v−bind))1、自定义v−model:父组件将v−model属性用在子组件上,就是通过改变子组件中的值来双向修改父组件的值(就是将v−model放在组件上),首先在子组件上定义一个model属性定义一些属性(prop、change),prop的值必须一一对应注意:1、子组件中使用:value来接收值2、子组件中的change和model属性中的change对应3、可以通过event函数获取到input里面输入的value值(event.target.value)2、就是在v−bind(:value())的基础上,加了一个v−on的改变事件13、this.nextTick(): 因为vue是异步渲染,dom在改变之后不会立刻渲染,所以在修改数据之后,等待dom渲染之后再回调,就可以获取修改之后的dom节点
用法:vm.msg = ‘cs’ (修改数据)
//dom未更新
this.$nextTice(() => {
//dom更新
})
13、、keep-alive的理解?(缓存组件,频繁渲染,不需要重复渲染的时候使用)
是Vue中的一个内置组件,可以使包含中的组件保留状态,避免重复渲染
13、为什么组件数据data是一个函数?return回去的是一个对象,但是在vue实例中data就是一个对象
因为组件是可以复用的,如果复用了多次组件,如果data是对象的话,对象是没有作用域的概念的,
所有返回的都是公用一块内存空间,改变一个值所有的都改变了
但是函数是有作用域概念的,创建一个函数就会创建一块内存空间,每个内存独立存在,互不干扰,
14、怎么理解单向数据流?
父组件通过props把数组传到子组件中,但是props里的值只能由父组件来修改,子组件不能修改(子组件只能修改data中的值),如果子组件想要修改的时候,
只能自定义一个
e
m
i
t
的
事
件
,
父
组
件
接
收
后
,
再
修
改
对
应
的
值
。
注
意
:
如
果
子
组
件
想
要
修
改
父
组
件
传
过
来
的
值
,
有
2
种
办
法
1
、
在
d
a
t
a
中
拷
贝
一
份
p
r
o
p
的
值
,
子
组
件
可
以
修
改
d
a
t
a
里
的
值
2
、
如
果
是
对
p
r
o
p
s
值
的
转
换
,
可
以
使
用
计
算
属
性
2
、
V
u
e
−
R
o
u
t
e
r
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
1
、
引
入
路
由
,
n
p
m
i
n
s
t
a
l
l
v
u
e
−
r
o
u
t
e
r
−
−
s
a
v
e
,
1
、
路
由
懒
加
载
,
2
、
配
置
映
射
关
系
,
3
、
挂
载
在
v
u
e
的
实
例
上
2
、
t
h
i
s
.
emit的事件,父组件接收后,再修改对应的值。 注意:如果子组件想要修改父组件传过来的值,有2种办法 1、在data中拷贝一份prop的值,子组件可以修改data里的值 2、如果是对props值的转换,可以使用计算属性 2、Vue-Router -------------------------------------------------------------------------------------------------------- 1、引入路由,npm install vue-router --save, 1、路由懒加载, 2、配置映射关系, 3、挂载在vue的实例上 2、this.
emit的事件,父组件接收后,再修改对应的值。注意:如果子组件想要修改父组件传过来的值,有2种办法1、在data中拷贝一份prop的值,子组件可以修改data里的值2、如果是对props值的转换,可以使用计算属性2、Vue−Router−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−1、引入路由,npminstallvue−router−−save,1、路由懒加载,2、配置映射关系,3、挂载在vue的实例上2、this.router 相当于是全局的路由对象,任何页面都可以调用其 push(回退之后可以到上一个页面), replace(不会回退到上个页面), go() 等方法。
1、this.
r
o
u
t
e
r
.
p
u
s
h
(
)
,
想
要
导
航
到
不
同
的
U
R
L
,
这
个
方
法
会
向
h
i
s
t
o
r
y
栈
添
加
一
个
新
的
记
录
2
、
t
h
i
s
.
router.push(),想要导航到不同的 URL,这个方法会向 history 栈添加一个新的记录 2、this.
router.push(),想要导航到不同的URL,这个方法会向history栈添加一个新的记录2、this.rouer.replease(),不会向history添加新记录,不能回退到上一个页面
3、this.
r
o
u
t
e
r
.
g
o
(
n
)
用
于
路
由
跳
转
,
可
以
向
前
或
向
后
跳
转
4
、
r
o
u
t
e
r
−
l
i
n
k
用
于
路
由
跳
转
,
(
t
o
,
r
e
p
l
e
a
s
e
,
a
c
t
i
c
e
−
c
l
a
s
s
)
属
性
5
、
r
o
u
t
e
r
−
v
i
e
w
用
于
路
由
渲
染
,
路
由
匹
配
的
组
件
会
渲
染
到
r
o
u
t
e
r
−
v
i
e
w
里
面
6
、
路
由
跳
转
的
方
式
,
<
r
o
u
t
e
r
−
l
i
n
k
t
o
=
“
”
>
,
t
h
i
s
.
router.go(n) 用于路由跳转,可以向前或向后跳转 4、router-link 用于路由跳转,(to,replease,actice-class)属性 5、router-view 用于路由渲染,路由匹配的组件会渲染到router-view里面 6、路由跳转的方式,<router-link to=“”>,this.
router.go(n)用于路由跳转,可以向前或向后跳转4、router−link用于路由跳转,(to,replease,actice−class)属性5、router−view用于路由渲染,路由匹配的组件会渲染到router−view里面6、路由跳转的方式,<router−linkto=“”>,this.router.push()
this.
r
o
u
t
e
相
当
于
当
前
页
面
的
路
由
,
属
于
局
部
对
象
,
可
以
获
取
对
应
的
n
a
m
e
,
p
a
t
h
,
p
a
r
a
m
s
,
q
u
e
r
y
等
属
性
3
、
r
o
u
t
e
r
:
1
、
r
o
u
t
e
r
−
v
i
e
w
(
r
o
u
t
e
r
自
带
的
组
件
,
当
点
击
那
个
路
由
的
时
候
,
会
把
当
前
点
击
中
的
路
由
组
件
中
的
内
容
渲
染
这
个
页
面
上
,
用
r
o
u
t
e
r
−
v
i
e
w
渲
染
,
还
有
r
o
u
t
e
r
−
l
i
n
k
用
来
设
置
路
由
跳
转
和
一
些
c
l
a
s
s
属
性
等
)
2
、
r
o
u
t
e
r
−
l
i
n
k
默
认
相
当
于
a
标
签
,
t
a
g
=
"
b
u
t
t
o
n
"
可
以
将
默
认
的
a
标
签
换
成
b
u
t
t
o
n
按
钮
,
a
c
t
i
v
e
−
c
l
a
s
s
=
"
x
i
a
o
z
o
u
"
修
改
c
l
a
s
s
的
属
性
名
称
(
<
r
o
u
t
e
r
−
l
i
n
k
t
o
=
"
/
h
o
m
e
"
t
a
g
=
"
b
u
t
t
o
n
"
r
e
p
l
a
c
e
a
c
t
i
v
e
−
c
l
a
s
s
=
"
x
i
a
o
z
o
u
"
>
首
页
<
/
r
o
u
t
e
r
−
l
i
n
k
>
)
3
、
动
态
路
由
传
参
:
传
递
的
是
一
个
对
象
1
、
−
−
−
−
p
a
r
a
m
s
通
过
r
o
u
t
e
r
−
l
i
n
k
来
传
递
带
g
e
t
参
数
的
,
(
:
t
o
=
"
p
a
t
h
:
′
/
m
i
n
e
′
,
q
u
e
r
y
:
n
a
m
e
:
′
z
j
w
′
,
a
g
e
:
18
"
)
2
、
−
−
−
−
q
u
e
r
y
通
过
方
法
来
传
递
带
g
e
t
参
数
的
,
(
:
t
o
=
"
p
a
t
h
:
′
/
m
i
n
e
′
,
q
u
e
r
y
:
n
a
m
e
:
′
z
j
w
′
,
a
g
e
:
18
"
)
4
、
路
由
跳
转
的
方
式
?
1
、
<
r
o
u
t
e
r
−
l
i
n
k
t
o
=
"
/
h
o
m
e
"
>
当
前
标
签
会
转
化
为
a
标
签
2
、
t
h
i
s
.
route 相当于当前页面的路由,属于局部对象,可以获取对应的 name, path, params, query等属性 3、router: 1、router-view(router自带的组件,当点击那个路由的时候,会把当前点击中的路由组件中的内容渲染这个页面上,用router-view渲染 ,还有router-link用来设置路由跳转和一些class属性等) 2、router-link 默认相当于 a标签,tag="button" 可以将默认的a标签换成button按钮,active-class="xiaozou"修改class的属性名称(<router-link to="/home" tag="button" replace active-class="xiaozou">首页</router-link>) 3、动态路由传参:传递的是一个对象 1、----params 通过router-link来传递带get参数的,(:to="{path: '/mine', query: {name: 'zjw', age: 18}}") 2、----query 通过方法来传递带get参数的,(:to="{path: '/mine', query: {name: 'zjw', age: 18}}") 4、路由跳转的方式? 1、<router-link to="/home"> 当前标签会转化为a标签 2、this.
route相当于当前页面的路由,属于局部对象,可以获取对应的name,path,params,query等属性3、router:1、router−view(router自带的组件,当点击那个路由的时候,会把当前点击中的路由组件中的内容渲染这个页面上,用router−view渲染,还有router−link用来设置路由跳转和一些class属性等)2、router−link默认相当于a标签,tag="button"可以将默认的a标签换成button按钮,active−class="xiaozou"修改class的属性名称(<router−linkto="/home"tag="button"replaceactive−class="xiaozou">首页</router−link>)3、动态路由传参:传递的是一个对象1、−−−−params通过router−link来传递带get参数的,(:to="path:′/mine′,query:name:′zjw′,age:18")2、−−−−query通过方法来传递带get参数的,(:to="path:′/mine′,query:name:′zjw′,age:18")4、路由跳转的方式?1、<router−linkto="/home">当前标签会转化为a标签2、this.router.push(’/home’)
3、Vuex ---------------------------------------------------------------------------------------------------------
1、action属性是异步的
2、mutation属性是同步的函数,state的值只有mutation可以更改,通过发送commit事件进行修改state的值
注意:通过commit提交mutation的方式来修改state,而不要直接修改state,否则会报错
3、state:存放的基本的数据,通过this.
s
t
o
r
e
.
s
t
a
t
e
.
获
取
值
4
、
g
e
t
t
e
r
s
:
类
似
于
计
算
属
性
,
用
于
监
听
s
t
a
t
e
的
值
是
否
变
化
,
会
缓
存
数
据
5
、
m
o
d
u
l
e
s
:
模
块
化
(
将
s
t
o
r
e
分
割
成
不
同
的
模
块
)
6
、
页
面
刷
新
数
据
会
丢
失
,
可
以
存
到
缓
存
里
面
注
意
:
1
、
t
h
i
s
.
store.state.获取值 4、getters:类似于计算属性,用于监听state的值是否变化,会缓存数据 5、modules:模块化(将store分割成不同的模块) 6、页面刷新数据会丢失,可以存到缓存里面 注意: 1、this.
store.state.获取值4、getters:类似于计算属性,用于监听state的值是否变化,会缓存数据5、modules:模块化(将store分割成不同的模块)6、页面刷新数据会丢失,可以存到缓存里面注意:1、this.store.state.redirectPage 获取state的值
2、this.$store.commit(‘orderTab’, index) 修改里面的值
4、Axios ------------------------------------------------------------------------------------------------------------
1、axios的特点?
1、通过node创建 http请求
2、支持Promise的Api
3、可以做拦截器和相应
4、自动转换成json
5、axios中的发送字段的参数是data跟params两个,两者的区别在于params是跟请求地址一起发送的,data的作为一个请求体进行发送
params一般适用于get请求,data一般适用于post put 请求。
6、支持多种的请求方式、get post put delete
2、封装axios?
1、建一个文件来封装axios,再建一个文件统一管理接口的
2、因为项目的开发环境有,开发、测试、生成环境,可以通过node的环境变量来匹配默认的接口请求地址
process.env.NODE_ENV == ‘development’ 、process.env.NODE_ENV == ‘debug’、process.env.NODE_ENV == ‘production’
3、封装请求拦截
4、封装相应拦截
5、post、get、put
3、vue更新数组时触发视图更新的方法,做到响应式
push、pop、shift、unshift、splice、sort、reverse
splice:splice(2,0,‘bb’),从第二位开始,删除0个元素,并插入值,可以插入多个 (删除,插入,替换)都可以使用
4、什么是跨域?(跨域是由浏览器的同源策略造成的,是浏览器对js的安全限制)
1、当一个请求的url的协议、域名、端口号三者之间有任何一个与当前页面的url不同就是跨域
2、如果有一个没有同源策略的浏览器,就不用考虑跨域的问题了。不能跨域也是浏览对于用户安全的考虑
3、常用于客户端和服务端之间的通信
5、什么是同源策略?
1、指的是协议、域名、端口号必须相同
2、同源策略限制了一些不能操作的行为
1、Cookie/LocalStorage/indexDb 无法获取
2、DOM和JS对象无法获取
3、Ajax请求发送不出去
6、怎么才可以跨域?
1、jsonp的方式,需要调用回调方法
2、跨域资源共享CORS(常用)
3、nginx代理跨域
4、h5 新增的可以实现
7、什么是jsonp?
jsonp是服务端和客户端跨端通信的方法,但是只支持get请求,不支持post
注意:
1、浏览器的同源策略把跨域请求都禁止了,但是页面中的
二、MVC&MVVM设计模式与模块化开发流程
1、MVVM:(M对应的是数据,还有网络请求过来的数据,相当于data中的数据,用来保存每个页面的数据),
(V对应的是dom节点,相当于上面的html代码),
(VM对应的是vue实例,通过双向数据绑定将M和V连接起来,就是new Vue出来的vm对象,相当于调度者)
M和V直接不能直接通信,需要通过VM进行通信
VM:的作用(分割了M和V,相当于调度者,用于通信)
1、可以将M(data中的数据)通过matcher语法绑定到V()里面,
相当于将data中的数据解析然后渲染到页面然后绑定到dom上面
2、会对dom进行监听,当V()中有一些操作和点击事件的情况下,可以再回调用到M中的方法进行操作dom
M:的作用
1、可以写一些js的代码
2、可以定义一些函数方法methods
注意:MVVM(是前端视图层的分层开发思想,主要是把每个页面分成了M,V,VM, VM是思想核心,用于双向绑定)
0. 开发者不需要关心DOM的更新和修改,只需要在VM中进行逻辑开发就可以,通过VM进行双向绑定,直接修改BOM的显示,不进行dom操作
1. 各部分之间的通信,都是双向的。
2. View 与 Model 不发生联系,都通过 ViewModel 传递。通过双向绑定,
3. ViewModel它采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然
4、双向绑定的特性,数据同步相应
2、MVC:就是数据、视图、逻辑进行分层,实现解耦(多用于后端开发分层)
视图(View):用户界面。
控制器(Controller):业务逻辑
模型(Model):数据保存
通信方式:(所有通信都是单向的)
1、View 传送指令到 Controller
2、Controller 完成业务逻辑后,要求 Model 改变数据
3、然后再有control发送给view
4、模块化,容易复用,层次分明,容易维护