Vue 2.0的学习笔记: Vue实例和生命周期
来源:互联网 发布:android编程颜色表 编辑:程序博客网 时间:2024/05/17 04:49
Vue实例是进入Vue的第一步,创建一个Vue的实例也是学习Vue的起点。实际上,Vue框架的入口就是Vue实例,其实就是框架中的View Model,它包含页面中的业务处理逻辑、数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。Vue实例虽然没有完全遵循MVVM模型,但Vue的设计无疑受到了它的启发。那么我们就从MVVM模型的概念开始,进入有关于Vue实例和生命周期的学习之旅行。
什么是MVVM
MVVM是Model View ViewModel的简写。维基百科是这样描述的:
MVVM 是 Martin Fowler 的 Presentation Model 设计模式的一个演变。和 Fowler 的 Presentation Model 一样,MVVM 抽象了 view 的状态和行为。但是,和 Presentation Model 抽象一个 view 不依赖于一个特定的UI平台的做法相反,MVVM是由微软WPF 和 Silverlight 的架构师Ken Cooper 和 Ted Peters开发,是一种简化用户界面的事件驱动编程方式。
Vue实例虽然没有完全遵循MVVM模型,但Vue的设计无疑受到了它的启发。用一张图来阐述,可能更清晰些:
从图中我们可以清楚的得知,Vue实际上对应的就是MVVM中的VM,也就是ViewModel。因此在官方文档中经常可以看到vm
这个变量名来表示Vue实例。
对设计模式多少了解的同学,应该知道View和Model是什么:
- View:是看得到的,即视图,用到Vue的项目中来,它应该是“模板”。也就是用来挂载Vue实例的一个DOM元素,通常在项目根目录中
index.html
文件中出现,比如<div id="app"></div>
。 - Model:即模型(或数据),跟MVC中的Model一样,就是想要显示到模型上的数据,也是我们需要在程序生命周期中可能需要更新数据
在MVVM模型中,View和Model是分开的,两者不需要相互关心。但两者分开之后得通过ViewModel连接起来。比如:
let app = new Vue({ el: '#app', data() { return { name: '大漠', count: 0 } }, methods: { increase: function () { this.count++ } }})
上面的代码中el:'#app'
牵着View,data: {}
牵着Model,而类似methods
充当一个控制者(Controller)的角色,可以修改Model的值。
Vue的实例
简单的了解了MVVM的概念,我们开始来学习Vue的实例。事实上:每个Vue的应用都是通过Vue()
函数创建一个新的Vue实例开始的。创建了一个Vue实例,其实就创建了一个ViewModel。
先来回忆JavaScript中的构造函数:
所谓"构造函数",其实就是一个普通函数,但是内部使用了
this
变量。对构造函数使用new运算符,就能生成实例,并且this
变量会绑定在实例对象上。
比如:
function App() { // ...}
我们知道App()
是一个函数,在这个App()
函数前加上new
关键词,就把这个函数实例化了:
new App()
在Vue中,我们只需要直接new Vue()
就可以实例化一个Vue对象:
let app = new Vue({ // 选项})
注意:官网方档用的是vm
,出于个人爱好问题,我喜欢用app
来表示。
在实例化Vue时,需要传入一个选项对象,它可以包含数据data
、模板template
、挂载元素el
、方法methods
、生命周期钩子等选项。在实例化Vue的选项时,需要特别注意的是含有this
的函数,大多不要使用ES6箭头函数,因为我们期望this
指向的是Vue实例。
创建一个Vue实例
创建一个Vue实例,大致会经过四个过程:
首先通过关键语句new Vue()
创建一个Vue实例app
:
let app = new Vue({})
这个时候,我们给Vue()
传了一个空对象。在控制台上打印app
,你可以看到这个Vue实例对应的参数:
接下来,我们把新创建的Vue实例app
挂载到一个DOM元素上:
let app = new Vue({ el: '#app'})
这个#app
元素是HTML中的DOM元素:
<div id="app"></div>
Vue实例所有的东西都将在这个div#app
里展示。
接下来再给Vue实例中设置数据data
。写法也很简单:
let app = new Vue({ el: '#app', data() { return { name: '大漠' } }})
到这一步,万事具备,只欠东风了。Vue实例已经挂载到#app
的DOM元素上,数据data
也有了。最后需要将Vue实例中的数据绑定到指定的视图上,也就是数据渲染。
<div id="app"> <h1>Hello! {{ name }}</h1></div>
使用文本插值方式,将数据中的name
插入到对应的模板中。这个时候data
中的name
就在页面中成功的渲染出来子:
事实上,在Vue的实例中,除了插入挂载元素、数据选项之外,还可以插入模板、方法和生命周期钩子等选项。这些选项,当然你可以通过扩展Vue构造器来创建预定义选项的组件构造器:
let MyComponent = Vue.extend {( // 扩展选项)}let MyComponentInstance = new MyComponent()
Vue实例属性和方法
Vue实例属性和方法有很多:
点击这里可以浏览大图。
但我们经常会用到四个常用的参数选项,比如filters
、computed
、methods
和watch
等,对于其他不常见的属性和方法我们这里暂时不做阐述,后面的学习过程中会逐一介绍。
有关于常见的四个参数选项的使用,可以阅读下面的读书笔记:
- Vue的过滤器
- Vue的观察者
- Vue的Methods
- Vue中的computed属性
- Vue的计算属性
- Vue的Methods和事件处理
- 在Vue中何时使用方法、计算属性或观察者
Vue实例API
Vue实例自知带有很多API,这里简单的整理了相关的API:
点击这里可以浏览大图
除了上图罗列的API和属性以及方法中的API之外还有十个全局API和六个全局配置的API。先来看全局API的相应描述:
Vue.extend
:使用基础Vue构造器,创建一个“子类”。参数是一个包含组件选项的对象Vue.nextTick
:在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOMVue.set
:设置对象的属性。如果对象是响应式的,确保属性被创建后也是响应式的,同时触发视图更新。这个方法主要用于避开Vue不能检测属性被添加的限制Vue.delete
:删除对象的属性。如果对象是响应式的,确保删除能触发更新视图。这个方法主要用于避开Vue不能检测到属性被删除的限制,但是你应该很少会使用它Vue.directive
:注册或获取全局指令Vue.filter
:注册或获取全局过滤器Vue.component
:注册或获取全局组件。注册还会自动使用给定的id
设置组件的名称Vue.use
:安装Vue.js插件Vue.mixin
:全局注册一个混合,影响注册之后所有创建的每个Vue实例Vue.compile
:在render
函数中编译模板字符串。只在独立构建时有效
六个全局Vue.config
的API是:
Vue.config.silent = true
: 取消Vue所有的日志与警告Vue.config.optionMergeStrategies.methods
:自定义合并策略的选项Vue.config.devtools = true
:配置是否允许vue-devtools
检查代码Vue.config.errorHandler = function(err, vm){}
:指定组件的渲染和观察期间未捕获错误的处理函数Vue.config.ignoredElements = ['my-custom-web-component','another-web-component']
:忽略在Vue之外的自定义元素Vue.config.keyCodes
:给v-on
自定义键位别名
生命周期
Vue实例有一个完整的生命周期,从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。
下图说明了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。
注,上图来自于@老马自嘲的《Vue入门系列之Vue实例详解与生命周期》一文。
Vue提供的可以注册的钩子都在上图中红色框标注。他们是:
beforeCreate
:在实例初始化之后,数据观测(Data Observer)和event
/watcher
事件配置之前被调用create
:实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据(Data Observer)、属性和方法的运算,watch
/event
事件回调。然而,挂载阶段还没开始,$el
属性目前不可见beforeMount
:在挂载开始之前被调用:相关的render
函数首次被调用mounted
:el
被新创建的vm.$el
替换,并挂载到实例上去之后调用该钩子。如果root
实例挂载了一个文档内元素,当mounted
被调用时vm.$el
也在文档内beforeUpdate
:数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程updated
:由于数据更改导致虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件DOM已经更新,所以你现在可以执行依赖于DOM的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用beforeDestroy
:实例销毁之前调用。在这一步,实例仍然完全可用destroyed
:Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用
来看一个生命周期的简单示例:
let app = new Vue({ el: '#app', data() { return { name: '大漠' } }, beforeCreate: function () { console.log('===== 创建前 =====') console.log(this.name) console.log(this.$el) }, created: function () { // 在实例创建之后同步调用 // 此时实例已结束解析选项 // 这意味着已建立:数据绑定,计算属性,方法,watcher/事件回调 // 但是还没有开始DOM编译,$el还不存在,但是实例存在,即this.name存在,可以打印出来 console.log('===== 已创建 =====') console.log(this.name) console.log(this.$el) }, beforeCompile: function () { console.log('===== 未开始编译 =====') console.log(this.name) console.log(this.$el) }, compiled: function () { // 在编译结束之后调用 // 此时所有的指令已生效,因而数据的变化将触发DOM更新 // 但是不担保$el已插入文档 console.log('===== 编译完成 =====') console.log(this.name) console.log(this.$el) }, beforeMount: function () { console.log('===== Mount之前 =====') console.log(this.name) console.log(this.$el) }, mounted: function () { console.log('===== Mount完成 =====') console.log(this.name) console.log(this.$el) }, beforeUpdate: function () { console.log('===== 更新前 =====') console.log(this.name) console.log(this.$el) }, updated: function () { console.log('===== 更新完成 =====') console.log(this.name) console.log(this.$el) }, ready: function () { // 在编译结束和$el 第一次插入文档之后调用,如果在第一次attached钩子之后调用 // 注意,必须是由Vue插入,比如 vm.$appendTo()等方法或指令更新,才会触发ready 钩子 console.log('===== 一切都准备好了 =====') console.log(this.name) console.log(this.$el) }, attached: function () { // app.$appendTo('#app2')暂时触发不了,不知道怎么解决 // 在 vm.$el插入DOM时调用。必须是由指令或实例方法,比如$appendTo()插入,直接操作vm.$el不会触发这个钩子 console.log('===== 插入DOM成功 =====') console.log(this.name) console.log(this.$el) }, detached: function () { // 触发事件 app.$destroy(true),其中参数true控制是否删除DOM节点或者app.$remove() // 在vm.$el 从DOM中删除时调用。必须是由指令或实例方法删除,直接操作vm.$el不会触发这个钩子 console.log('===== 删除DOM成功 =====') console.log(this.name) console.log(this.$el) }, beforeDestroy: function () { // 触发方式,在console里面打印app.$destroy() // 在开始销毁实例时调用。此时实例仍然有功能 console.log('===== 销毁前 =====') console.log(this.name) console.log(this.$el) }, destroyed: function () { // 触发方式,在console里面打app.$destroy() // 其中app.$destroy(true)是删除DOM节点,会触发detached函数,但是实例仍然存在 // 在实例被销毁之后调用。此时所有的绑定和实例的指令已经解绑 // 注意是解绑不是销毁,所有的子实例也已经被销毁 console.log('===== 已销毁 =====') console.log(this.name) console.log(this.$el) }})
打印出来的结果:
接着在控制台修改data
的值,更新视图:
这个时候触发beforeUpdata
和updated
。接着执行app.$destroy()
:
总结一下,对官方文档的那张图简化一下,就得到了这张图:
注:上图来自@浅白的《Vue生命周期》一文。示例也参考此文。
仅这一点,还不足够我们彻底的理解和掌握Vue生命周期。但随着后面的学习,我们会慢慢的掌握生命周期中所有的知识点。
总结
这篇文章介绍了Vue的实例,简单的描述了Vue实例中的API以及如何创建Vue实例。最后用一张图简单的描述了Vue的生命周期。当然本文只是一个基本的介绍,如果要深入或者彻底的掌握相关的知识点,还需要不断的补充和学习。
由于作者也是Vue的初学者,如果文章中有不对之处,还请各咱大婶拍正,或者你有更好的经验,欢迎下面的评论中与我们一起分享。
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/vue/vue-instances-and-life-cycles.html © w3cplus.com著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/vue/vue-instances-and-life-cycles.html © w3cplus.com著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/vue/vue-instances-and-life-cycles.html © w3cplus.com
- Vue 2.0的学习笔记: Vue实例和生命周期
- vue笔记----实例的生命周期
- Vue实例的生命周期
- vue学习03----vue实例以及生命周期
- Vue之实例的生命周期
- vue学习二 vue 的生命周期
- VUE实例的生命周期与VUE组件的生命周期
- 关于Vue实例的生命周期created和mounted的区别
- 关于Vue实例的生命周期created和mounted的区别
- 关于Vue实例的生命周期created和mounted的区别
- Vue实例中生命周期created和mounted的区别
- Vue实例中的生命周期
- vue实例生命周期易错点
- vuejs2.0 vue实例的生命周期
- Vue 2.0 学习笔记
- Vue学习--生命周期
- VUE--事件和生命周期
- vue 入门和生命周期
- 单例设计模式
- 001 Windows8.1和Ubuntu14.04双系统搭建
- 图形用户界面之窗口程序
- html-初学
- <JS高级程序设计>--对象
- Vue 2.0的学习笔记: Vue实例和生命周期
- 深入理解HashMap(一)
- js 记录浏览器位置
- centos重新安装mysql切换datadir系列问题
- 从NB到N-gram语言模型
- Javascript this用法
- 二级联动添加表格及删除按钮弹出对话框
- 下载积分攻略: 1. 个人设置里进行手机绑定CSDN账户 奖励50分 (右上角设置-账户安全-手机绑定) 2. 完成任务送若干分积分 http://task.csdn.net/ 3. 上传有
- 构造方法