vue知识点

发表于 | 分类于 | |

生命周期

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed
1
2
graph LR
beforeCreate-->created

在这个生命周期之间，进行初始化事件，进行数据的观测，可以看到在created的时候数据已经和data属性进行绑定（放在data中的属性当值发生改变的同时，视图也会改变）。

1
2
graph LR
created-->beforeMount

首先会判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)。

1
2
graph LR
beforeMount-->mounted

可以看到此时是给vue实例对象添加$el成员，并且替换掉挂在的DOM元素。因为在之前console中打印的结果可以看到beforeMount之前el上还是undefined。

1
2
graph LR
mounted

在mounted之前h1中还是通过进行占位的，因为此时还有挂在到页面上，还是JavaScript中的虚拟DOM形式存在的。在mounted之后可以看到h1中的内容发生了变化。

1
2
graph LR
beforeUpdate-->updated

当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。

1
2
graph LR
beforeDestroy-->destroyed

beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

image

Vue-Router原理分析

单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面
实现这一点主要是两种方式:

  1. Hash: 通过改变hash值 ==window.onhashchange==
  2. History: 利用history对象新特性 ==window.onpopstate==

Hash

push() 设置新的路由添加历史记录并更新视图,常用情况是直接点击切换视图

  1. $router.push() //显式调用方法
  2. HashHistory.push() //根据hash模式调用,设置hash并添加到浏览器历史记录（window.location.hash= XXX）
  3. History.transitionTo() //开始更新
  4. History.updateRoute() //更新路由
  5. {app._route= route}
  6. vm.render() //更新视图

replace 替换当前路由并更新视图，常用情况是地址栏直接输入新地址

上述流程2替换成 当前hash （window.location.replace= XXX ）

监听地址栏变化

在setupListeners中监听hash变化(window.onhashchange)并调用replace

History

  1. push
    与hash模式类似，只是将window.hash改为history.pushState
  2. replace
    与hash模式类似，只是将window.replace改为history.replaceState
  3. 监听地址变化
    在HTML5History的构造函数中监听popState（window.onpopstate）

两种模式对比

History模式的优点:

  1. History模式的地址栏更美观。。。
  2. History模式的pushState、replaceState参数中的新URL可为同源的任意URL（可为不同的html文件），而hash只能是同一文档
  3. History模式的pushState、replaceState参数中的state可为js对象，能携带更多数据
    1.History模式的pushState、replaceState参数中的title能携带字符串数据（当然，部分浏览器，例如firefox不支持title，一般title设为null，不建议使用）

缺点:
对于单页面应用来说，理想的场景是仅仅在进入应用时加载页面（例如index.html）,后续的网络操作靠ajax完成，
而不会重新请求页面。
但当用户直接在用户栏输入地址时则会重新请求，当地址带有参数时两者情况不一样

Hash 例如: xxx.com/#/id=5 HTTP请求不会包含后面的hash值，所以请求的仍然是 xxx.com,没有问题

History 例如: xxx.com/id=5 这时请求的便是xxx.com/id=5，如后端没有配置对应id=XXX的路由处理，则会返回404错误。

官方推荐的解决办法是在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。同时这么做以后，服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。或者，如果是用 Node.js 作后台，可以使用服务端的路由来匹配 URL，当没有匹配到路由的时候返回 404，从而实现 fallback。

Vuex 框架原理与源码分析

Vuex是一个专为Vue服务，用于管理页面数据状态、提供统一数据操作的生态系统。它集中于MVC模式中的Model层，规定所有的数据操作必须通过 action – mutation – state change 的流程来进行，再结合Vue的数据视图双向绑定特性来实现页面的展示更新。统一的页面状态管理以及操作处理，可以让复杂的组件交互变得简单清晰，同时可在调试模式下进行时光机般的倒退前进操作，查看数据改变过程，使code debug更加方便。

image

亲，赏一个呗，一分也是爱！
0%