Vue知识点整理

一、对于MVVM的理解

MVVM是model-view-viewmodel的简写。

model:代表数据模型,也可以在model中定义数据修改和操作的业务逻辑。

view:代表UI组件,负责将数据模型转化成UI展现出来。

viewmodel:监听模型数据的改变和控制视图行为、处理用户交互。简单理解就是一个同步model和view的对象,连接view和model。

在MVVM架构下,view和model之间并没有直接的联系,而是通过viewmodel进行交互,model和viewmodel之间的交互是双向的,因此view数据的变化会同步到model中,而model数据的变化也会立即反应到view上。viewmodel通过双向数据绑定把view层和model层连接起来,而view和model之间的同步工作完全是自动的,无需人为干涉,因此开发者值只需要关注业务逻辑,不需要手动操作DOM,不需要关注数据状态的同步问题,复杂的数据状态维护完全由MVVM来统一管理。

二、Vue的生命周期

Vue实例从创建到销毁的过程,就是vue的生命周期。从开始创建、初始化数据、编译模板、挂载DOM->渲染、更新->渲染、销毁等一系列过程,称之为vue的生命周期。

beforeCreate(创建前):在数据观测和初始化事件还没开始。

created(创建后):完成数据观测、属性和方法的运算、初始化事件,$el属性还没有显示出来。

beforeMount(载入前):在挂载开始之前被调用,相关的render函数首次被调用。实例已经完成以下配置:编译模板,把data里面的数据和模板生成HTML。此时还没有挂载HTML到页面。

mounted(载入后):在el被新创建的vm.$el替换并挂载到实例上去之后调用。实例已经完成以下配置:用上面编译好的HTML内容替换el属性指向的DOM对象,完成模板中的HTML渲染到HTML页面中,此过程中进行ajax交互。

beforeUpdate(更新前):在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以再该钩子中进一步地更改状态,不会触发附加的渲染过程。

updated(更新后):在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

beforeDestroy(销毁前):在实例销毁之前调用,实例仍然完全可用。

destroyed(销毁后):在实例销毁后调用,调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。改钩子在服务器端渲染期间不被调用。

三、Vue实现数据双向绑定的原理:Object.defineProperty()

Vue实现数据双向绑定主要是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter、getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通JavaScript对象传给Vue实例来作为它的data选项时,Vue将遍历它的属性,用Object.defineProperty()将它们转为getter/setter。用户看不到getter/setter,但是在内部它们让Vue追踪依赖,在属性被访问和修改时通知变化。 

Vue的数据双向绑定将MVVM作为数据绑定的入口,整合Observer,Compile和Watcher三者,通过Observer来监听自己的model的数据变化,通过Compile【mustache语法】来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化->视图更新;视图交互变化->数据model变更双向绑定效果。

四、Vue组件间的参数传递

1.父子组件传值

父组件传值给子组件:子组件通过props方法接收数据,props里的数据只能用于展示不能修改。

子组件传值给父组件:$emit方法传递参数。

2.兄弟组件传值

eventBus。就是传建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适。

五、Vue路由的实现:hash模式和history模式

hash模式:在浏览器中符号“#”表示,#以及#后面的字符称之为hash,用window.location.hash读取。特点是hash虽然在URL中,但不被包括在http请求中,用来指导浏览器动作,对服务器端晚完全无用,hash不会重加载页面。hash模式下,近hash符号之前的内容会被包含在请求中,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回404错误。

history模式:history模式采用HTML5的新特性,且提供了两个新方法:pushState(),replaceState(),可以对浏览器历史记录栈进行修改,以及popState事件的监听状态变更。history模式下,前端的URL必须和实际向后端发起请求的URL一致。后端如果缺少对URL的路由处理,将返回404错误。Vue-Router官网里如此描述:“不过这种模式要玩的好,还需要后台配置的支持......所以呢,你要在服务器端增加一个覆盖所有情况的候选资源;如果URL匹配不到任何静态资源,则应该返回同一个index.html页面,这个页面就是你APP依赖的页面。”

六、Vue路由的钩子函数

首页可以控制导航跳转,一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach(to,from,next ):全局前置守卫。有三个参数,to:route即将进入的目标路由对象。from:route当前导航正要离开的路由。next:本身是function,一定要调用该方法resolve这个钩子,如果不执行就不会进行下一步,执行效果依赖next方法的调用参数。

七、Vuex的使用

Vuex是一个专门为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex的核心是store。

这个状态自管理应用包含以下几个部分:

state:单一状态树。Vuex使用单一状态树,即每个应用仅仅包含一个store实例,用一个对象就包含了全部应用层级状态。但不能直接修改state里的数据,改变store中的状态的唯一途径是显式的提交mutation,通过提交mutation的方式,可以更好地追踪状态的变化。在计算属性中通过store.state来获取状态对象,在methods中通过store.commit方法提交mutation触发状态变更。

getters:类似Vue的计算属性,主要用类似过滤数据。getter接受state作为第一个参数,也可以接受其他getter作为第二参数,参数名为getters。getter在通过方法访问时,每次都会去进行调用而不会缓存结果

mutations:mutations定义的方法动态修改state中的数据,是同步方法。mutation是更改Vuex的store.state的唯一方式,state里的值只能在mutation中修改,mutation的第一个参数一定是默认参数state,mutation的普通提交方法是调用$store.commit;mutation的封装提交方法是封装对象,这样Vuex文件拿到的参数就是一个对象,参数命名默认payload作为第二参数。mutation相响应改变state中的数据的规则如下:1.属性已经在state中初始化;2.给state中的对象添加新属性时使用以下方式:2.1.Vue.set(state.object,‘key’,‘value’);2.2.用新对象给旧对象重新赋值。

actions:actions可以理解为通过将mutations里面处理数据的方法变成异步的处理数据的方法,简单地说就是异步操作数据,默认参数context。view层通过store.dispatch来分发action

modules:项目特别复杂的时候,可以让每一个模块拥有自己的state、mutation、action、getter,使结构非常清晰,方便管理

Vuex的应用场景:用户的登录状态、用户名称、头像、地理位置,商品的收藏,购物车中的商品等多个组件共享同一个状态的场景。

八、对keep-alive的了解

keep-alive是Vue内置的一个组件,可以使被包含的组件保留存活状态不被销毁,或避免重新渲染。在Vue2.1.0版本之后,keep-alive新加入两个属性:include(包含的组件缓存)与exclude(排除的组件不缓存,优先级大于include)。两个属性里面的值用逗号隔开,逗号后面不能跟空格,正则表达式也不能。

include- 字符串或正则表达式,只有名称匹配的组件会被缓存。

exclude- 字符串或正则表达式,名称匹配的组件都不会被缓存。

二者都可以用逗号分隔字符串、正则表达式、数组。当使用正则表达式或者是数组时,要用v-bind。

你可能感兴趣的:(Vue知识点整理)