1. MVVM:model + view + viewModel,通过viewmodel连接数据模型model和view
vue以数据为驱动，vue将自身DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步，每当数据发生改变，DOM会改变.
viewmodel是vue的核心，它是vue的一个核心。vue实列时作用在作用域某个HTML元素上
DOM Listeners和Data Bindings是实现双向绑定的关键，DOM Listeners监听view层ODM元素的变化，Data bingings监听model层的数据变化。
2.Vue2.0双向绑定的原理和Vue3.0双向绑定的原理
vue2.0采用数据劫持结合发布-订阅者模式的方式，通过object.defineProperty()来劫持各个属性的setter和getter,在数据变动时发布消息给订阅者，触发相应的回调。
vue3.0使用原生proxy,proxy在目标对象之前设置一层拦截，外界访问改对象的时候必须通过这层拦截，可以对外界的访问进行过滤和改写，进行代理。
proxy一共有13种拦截操作：get(target,propKey,recever):拦截对象属性的读取，set(target,propKey,value,receiver):拦截对象属性的设置。但是基本不兼容IE浏览器。
2.1. Vue2.0代码
var obj ={}
Obeject.denfineProperty(obj,'prop',{
get: funtion(){ return val}
set: funtion(){
val = newVal;
document.getElementById('text').innerHTML = val;
}
})
2.2. Vue3.0代码
var obj = {}
var obj1 = new Proxy(obj,{
get:funtion(target,key,receive){
return target[key]
}
set:funtion(target,key,newVal,receive){
target[key] = newVal;
document.getElementById('test').innerHTML = target[key]
}
})
document.addEvenetListener('keyup',function(e){
obj1[0] = e.target.value
})
3. Vue生命周期
Vue2.0生命周期
beforCreate,create，创建前后
beforMount,mounted，挂载前后
beforUpdate,updated， 更新前后
beforDestroy,destroyed，销毁前后
Vue3.0声明周期
setup() 创建前后
onBeforMount,onMounted, 挂载前后
onBeforUpdate,onUpdate,更新前后
onBeforUnmount,onUmounted,销毁前后
4. Vue指令
内部指令：v-for,v-if,v-else,v-bind,v-on,v-show,v-model
自定义指令：Vue.directive(id,[definition])注册全局指令，第一个参数为自定义指令名称，第二个参数可以是对象数据，也可以是另一个指令函数
5. Vue过滤属性和计算属性，监听属性
过滤器：filter:数据过滤后出来另一样自己想要的东西
计算属性：computer:模板中放入太多的逻辑会让模板过重且难以维护，使用计算属性可以使数据处理结构清晰简单等。
监听属性：watch:响应数据的变化
6. 组件
组件注册：Vue.component('my-component',{})
父子组件之间通信： 父传子：props,子传父：通过$emit方法传递参数，触发父组件event.
7. Vuex
1：state
1.1: 一个状态多个组件使用，改变状态，其余组件也随着改变状态,用来集中管理应用的所有组件的状态state:{count:10}
1.2：state:驱动应用的数据源，Vuex通过store选项，提供了一种机制将状态从根组件注入到每一个子组件中
1.3：因为根实例中注册store选项，该store实例会注入到根组件下的所有子组件中，且子组件能通过this.$store访问到
computed:{ count() { return this.$store.state.count }}
2: getter
2.1:getter就是对状态进行处理的提取出来的公共部分，当状态进行筛选这些操作时，可以通过getter处理过后再返回给组件使用。
state:{
list:[1,2,3,4,5]
}
getters:{
modifyArr(state){
return state.list.filter((item,index,arr)=> {
return item%2 ==0
})
},
getLength(state,getter){
return getter.modefyArr.length
}
3：mutation:改变store的状态只能通过mutaion方法
state:{
count:1
}
mutations:{
increment(state){
state.count++
}
}
methods:{
addition(){
this.$store.commit('increment')
}
}
4:action:异步的操作，提交的是mutation,不是直接变更状态
state:{
obj:{},
}
mutations:{
getParam(state,Object){
state.obj = Object
}
}
actions: {
getParamSync(context,Object){
setTimeOut(()=>{
context.commit('getParam',Object)
})
}
}
methods:{
this.$store.dispatch('getParamSync',{})
5:Modules:将store分割成模块（modules，每个模块拥有自己的state,mutation,action,getter)
import '..' from '..'
import moduleA from './module/moduleA'
import moduleB from './module/moduleB'
export default new Vuex.Store({
actions,
getters,
mutations,
modules:{
moduleA,
moduleB
}
})
export default {
state:{
text:'moduleA/moduleB'
},
getters:{},
mutations:{},
actions:{},
}
computed:{
getText(){
return this.$store.state.moduleA/moduleB.text
}
...mapState(){
getText:state=>state.moduleA/moduleB.text
}
8:Vue-Router
1：编程式导航
router.push({path:"register",query:{userId:"123"}})
router.replace({path:"register",query:{userId:"123"}})
router.go(-n/n)
2: 声明式导航
<router-link :to="{name:'/register',qyery:{userId:'123'}}"></router-link>
<router-link :to="{name:'/register',qyery:{userId:'123'}}" replace> </router-link>
3: 导航守卫
(to:即将进入的目标的，from:当前正要离开的路由，next：下一步)
1：全局前置守卫：router.beforEach((to,form,next)=>{
2：组件守卫
beforeRouteEnter(to,form,next){}
beforeRouteUpdate(to,form,next){}
beforeRouteLeave(to,form,next){}
谢谢你长这么好看还来看我的文章
