vue优点
双向数据绑定:在数据操作方面更为简单;
组件化:组件的封装和复用,开发更高效;
虚拟DOM:不再使用原生dom操作节点,原生dom操作非常耗性能
MVVM的理解
Model是模型层
View 是视图层
ViewModel 介于View和Model之间,起桥梁作用,使视图和数据既能够分离又能通信,View的变化能实时让Model发生变化,而Model的变化也能实时更新到View。
vue原理
双向数据绑定
通过数据劫持,结合发布订阅模式的方式实现,达到数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变。
虚拟DOM
用JavaScript对象来代替DOM节点
// 原始dom节点
<ul calss=‘myclass’>
<li>初始文本</li>
</ul>
// 对象形式节点
let ul = {
tag: ‘ul’,
attrs: { class: ‘myclass’ },
children: [
tag: 'li',
attrs: {},
children: ['初始文本']
]
}
// 通过修改对象属性来修改视图
ul.children.children[0](‘修改后的文本’)
组件传值
父传子:
父组件中,用v-bind,绑定属性值,子组件通过props接收;
子传父:
子组件通过$emit传值,父组件通过v-on绑定的事件接收;
兄弟传值:
通过中间值,也是就在main.js文件里,new一个vue实例实现传值
Vuex的理解
是vue的状态管理器
State:存放数据
Getters:监听数据
Mutations:提交更改数据的方法,同步
Actions:像一个装饰器,包裹mutations,使之可以异步
Modules:模块化vuex
mapState、mapGetters、mapActions
生命周期
创建前/后,载入前/后,更新前/后,销毁前/后
beforeCreated 创建前
created 创建后
beforeMount 载入前
mounted 载入后
beforeUpdate 数据更新前
updated 数据更新后
beforeDestory 实例销毁前
destroyed 实例销毁后
父子组件的生命周期顺序
渲染过程:
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
更新过程:
父beforeUpdate->子beforeUpdate->子updated->父updated
< keep-alive> < /keep-alive>的作用
是 vue内置组件,可以保留其包含的组件的状态,避免重新渲染
ref的作用
获取dom元素
获取子组件的data
调用子组件的方法
组件中key的作用
key是节点唯一标识,方便diff算法识别节点,高效更新虚拟dom
组件中name的作用
在dev-tools中使用,dev-tools中是以组件name进行显示的;
配合keep-alive对组件缓存做限制
组件中data为什么必须是一个函数
写成函数,复用组件时,都会返回一份新的data,相当于每个组件都有私有的数据空间,各自维护数据,不会造成混乱。而写成对象形式,相当于所有组件共用一个data,会牵一发而动全身。
$nextTick的使用
created() 钩子内进行的dom操作一定要放在vue.nextTick() 的回调函数中,created() 执行时dom实际并未渲染,此时进行dom操作是徒劳的,nextTick正好解决了这一问题。
路由的模式
hash模式:即地址栏url中的#符号
history模式:利用了 html5中window.history新增的 pushState() 、replaceState() 方法
路由的导航钩子
全局导航钩子:router.beforeEach(to,from,next),即路由守卫;
组件内的钩子:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
路由懒加载的实现方式
使用import,实现懒加载;
webpack提供的方法,实现懒加载
路由传参方式
path后添加id
使用路由name匹配路由,通过params传递参数;
使用path匹配路由,通过query传递参数;
第一种方式,页面刷新参数会丢失,而其他两种不会
v-show、v-if的区别
v-show本质是控制样式的显示和隐藏;
v-if是动态添加或者删除DOM元素,不停的销毁和创建更耗性能
less、scss申明变量方式
less用@符申明和使用变量
scss用$符申明和使用变量