一、什么是MVVM
MVVM是Model-View-ViewModel的简写,体现在框架上的样子如下:(图片是在网上找的)
体现在代码上编写位置如下:
MVVM 就是将其中的View 的状态和行为抽象化
,让我们将视图 UI 和业务逻辑
分开。当然这些事 ViewModel 已经帮我们做了,它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑
,而MVVM主要目的是分离视图(View)和模型(Model),然后减低耦合,提高可重用性
,让开发把关注点放在业务处理上,界面的展示东西只是一小部分的东西。
二、创建一个Vue实例
如果你学过面向对象编程的人,对这个实例是超级熟悉的,就是一个创建对象,Vue也是一样,用new关键字。每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:
var vm = new Vue({
// 选项
})
三、Vue的选项options
3.1 什么是选项
当我们写一下个Vue实例的时候,实例里可以传入一个对象,或者说是一个参数,只是这个参数的object
这个是官网的写法,把这个对象放在了({对象值:选项})
const app = new Vue({
el: "#app1",
data: {
message: "hello vue"
}
})
我把这个对象放出来,这样会看得更加明显一点,其实就是一个传参obj
,只是这个传参的对象里的值有很多很多给自己选择,而对象里的值就是Vue的选项
var obj = {
el: "#app1",
data: {
message: "hello vue"
}
}
const app = new Vue(obj)
3.2 选项值有那些
可以去看一下官网的选项API,那么多的选项值,我们也不用记那么多,也记不住那么多,我只要记得几个常用的就好了,不会的再去查一下就好了。
#el
类型:string Element
限制:只在用 new 创建实例时生效
。
#data
类型:Object Function
限制:组件的定义只接受 function
。
#methods
类型:{ [key: string]: Function }
详细:methods 将被混入到 Vue 实例中。可以直接通过 VM 实例
访问这些方法,或者在指令表达式中使用方法中的 this
自动绑定为 Vue 实例。
#生命周期钩子
函数名称:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated 、deactivated、beforeDestroy、destroyed、errorCaptured
四、Vue生命周期
4.1 生命周期图解
Vue的生命周期从开始创建
,初始化
数据,编译
模板,挂载
Dom 渲染
→更新
→渲染
→销毁
(网上找的图片)
4.2生命周期的钩子函数
钩子 | 说明 |
---|---|
beforeCreate | 在实例初始化之后,数据观测和event/watcher时间配置之前被调用。这个时候,this变量还不能使用,data下的数据,和methods下的方法,watcher中的事件都不能获得到; console.log(this.page); // undefined |
created | 实例已经创建完成之后被调用。在这一步,实例已经完成以下的配置:数据观测,属性和方法的运算watch/event事件回调。然而,挂载阶段还没开始,$el属性目前不可见。这个时候可以操作vue实例中的数据和各种方法,但是还不能对"dom"节点进行操作;let btn = document.querySelector('button')console.log(btn.innerText) //此时找不到button节点,打印不出来button的值 |
beforeMount | |
mounted | 这个时候挂载完毕,这时dom节点被渲染到文档内,一些需要dom的操作在此时才能正常进行。注意: mounted在整个实例的生命周期中只执行一次。let btn = document.querySelector('button')console.log(btn.innerText) //此时找不到button节点,打印不出来button的值 |
beforeUpdate | 数据更新之前操作 |
updated | 由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件DOM已经更新,所以你现在可以执行依赖于DOM的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。 |
activated | keep-alive组件激活时调用。 该钩子在服务器端渲染期间不被调用。 |
deactivated | keep-alive组件停用时调用。 该钩子在服务端渲染期间不被调用。 |
beforeDestroy | 就是Vue实例销毁前,就比如我们经常看到的:“你确定要退出这个界面” |
destroyed | Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 |
keep-alive:
概念
keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。
作用
在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性
文章笔记参考https://blog.csdn.net/qq_30442207/article/details/108266756