vue双向数据绑定、路由

vue双向数据绑定原理： 开发订阅者模式。

1. 实现的关键是object.defineProperty监听。getter用来收集数据, setter检测到数据改变就会更新return出新属性。
2. defineProperty的缺点：只能对原有属性进行监听, 监听不到属性的添加、删除。属性的添加、删除需要用到vue.set()或vue.delete()
3. 对数组的操作只能监听到“pop/push/splice/shift/unshift/sort/reverse”七个方法,其他数组的使用则无法检测到以上修改数组的方法均是vue重新封装,并不是传统意义上js方法

image.png

js的执行顺序 ：js线程中的执行栈（同步）=》微任务（异步）（js产生的异步Promise、mutation等进入微任务）=》宏任务 （异步）（浏览器提供的异步方法SetTimeOut、SetInterval等进入宏任务）

在promise中如果有宏任务,则必须执行完宏任务以后才向下进行：

let promise=new Promise(function(resove){
    setTimeout(function(){
      console.log("setTimeout");   //宏任务
     },0);
     console.log("promise");   //同步任务
  }).then(function(value){     //微任务
    // then回调函数是微任务执行由promise执行结果决定的，
    // 所以必须等promise执行完，才能开始，即使在定时器宏任务里面，也要等宏任务加载完毕。
    console.log("成功");
})
console.log("houdunren.com");  //同步任务


//结果：promise houdunren.com setTiout 成功

二：路由 vue-Router

1:router与route的区别

router: 为VueRouter的实例, 是一个全局路由对象,包含了路由跳转的方法、钩子函数等。（beforeRouteEnter、beforRouteUpdate、beforeRouteLeave、afterRouteEnter....等）

route：是路由对象、跳转的路由对象, 每一个路由都有一个route对象,是一个局部对象,包含path、params、hash、query、fullPath、matched、name等路由信息

2:监听当前路由的变化

watch检测：

watch(){
  $route(to, from){
    console.log(to, from)
    //路由变化做出响应
  }
}

组件内导航钩子函数：beforeRouteUpdate

beforeRouteUpdata(to, from, next){
  //to  do  somethings
}

3:传参

{
  path: '/detaile/:id',
  name:'Details',
  components: Details
}
//获取变量
const id = this.$route.params.id

params：只能使用name, 不能使用path、不会显示在路径上、浏览器强制刷新参数会被清空

// 传递参数
this.$route.push({
  name: 'Home',
  params:{
    number: 1,
    code: 9999
  }
})
// 接收参数：
const value =  this.$route.params

query: name可以, path可以、 显示在路径上

//传递参数
this.$route.query({
   name: 'Home',
   query:{
      number: 1,
      code: 9999
    }
})
// 接收参数
const value = this.$route.query

hash: 原理是在 window对象上监听onhashchange事件

window.onhashchange = function(event){
  console.log(event.oldURL, event.newURL)
  let hash = location.hash.slice(1)
}

history: H5 History Interface中新增的pushState（）和 replaceState（）方法。
需要后台配置支持。如果刷新时 服务器没有响应的资源,会刷新404