vue知识要点（三）

mvvm模式

//mvvm分为三层架构（m:model数据层，v:view视图层，vm:viewModel数据与视图间桥梁（业务层））

双向绑定原理

/*
基本概念：
	当视图上的数据发生改变是，data中数据也发生改变
    当data中数据发生改变时，视图中数据也发生改变
主流使用的时vue2.x
	2.x中是使用Object.defineProperty
*/
	var data={}
    document.querySeletor("#ipn").oninput=function(e){
    	data.name=e.target.value
    }
    Object.defineProperty(data,'name',{
    	get:function(){
        	return this.name
        },
        set:function(value){
        	this.name=value
            document.querySeletor("#box").innerHTML=value
            document.querySeletor("#ipn").value=value
        }
    })
 /*
 vue3.x中使用的是proxy
 返回值=new Proxy(对象,{
 	get(target,key){
    	target:对象，
        key:键名
    }，
    set(target,key,value){
    	target:对象，
        key:键名,
        value:修改的值
    }
 })
 2.x与3.x的区别:
 	- 2.x原本存在的属性改变了，vue能识别，但是新增属性识别不了
    - 3.x对数据做了一个代理，让数据内的所有属性都有了get和set方法,set值修改就会让所有dom更新一次
*/

Vue.extend使用

• Vue.extend(组件)
  • 返回的是一个构造函数
  • 不能直接使用，还需实例化（通过new关键字）
  • 实例化出来的就是包含传入的组件特性
• $mount(选择器)
  • 直接找到该组件，并把组件添加进去
  • $mount是基于组件的tempalte生成的dom结构

路由钩子函数

• 全局钩子函数

  //前置路由守卫
  router.beforeEach((to,from,next)=>{
  	next()
  }
  // 后置路由守卫
  router.afterEach((to,from)=>{
  	
  })
  

• 路由对应组件钩子函数

  //进入前，还没有完成data,methods
  beforeRouteEnter((to,from,next)=>{
  	next()
  })
  // 更新时(路由没跳转，路由参数发生变化)
  beforeRouteUpdata((to,from,next)=>{
  	next()
  })
  // 离开前(在beforeDestroy之前)
  beforeRouteLeave((to,from,next)=>{
  	next()
  })
  

• 路由配置钩子函数

  //进入前
  beforeEnter((to,from,next)=>{
  	next
  })