Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑、数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

Vue 实例

在文档中经常会使用 vm 这个变量名表示 Vue 实例,在实例化 Vue 时,需要传入一个选项对象,它可以包含数据(data)、模板(template)、挂载元素(el)、方法(methods)、生命周期钩子(lifecyclehook)等选项。

Vue 实例化的选项

需要注意的是含 this 的函数大多不要使用箭头函数,因为我们期望 this 指向 Vue 实例。

data

Vue 实例的数据都保存在 data 对象中,Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。

1
2
3
4
5
6
7
var data = { a: 1 }
// 直接创建一个实例
var vm = new Vue({
 data: data
})
vm.a // -> 1
vm.$data === data // -> true

这样数据就绑定在 HTML 中,Vue 框架监视 data 的数据变化,自动更新 HTML 内容。

computed

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue

实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var vm = new Vue({
 data: { a: 1 },
 computed: {
 // 仅读取,值只须为函数
 aDouble: function () {
  return this.a * 2
 },
 // 读取和设置
 aPlus: {
  get: function () {
  return this.a + 1
  },
  set: function (v) {
  this.a = v - 1
  }
 }
 }
})
vm.aPlus // -> 2
vm.aPlus = 3
vm.a  // -> 2
vm.aDouble // -> 4

这里可以省略setter,如果省略了setter,那么值就可以是普通函数,但是必须有返回值。

methods

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

1
2
3
4
5
6
7
8
9
10
var vm = new Vue({
 data: { a: 1 },
 methods: {
 plus: function () {
  this.a++
 }
 }
})
vm.plus()
vm.a // 2

看下面这个例子,methods 和 computed 看起来可以做同样的事情,单纯看结果两种方式确实是相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。相比而言,只要发生重新渲染,method 调用总会执行该函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
var vm = new Vue({
 el: '#example',
 data: {
 message: 'Hello'
 },
 computed: {
 // a computed getter
 reversedMessage: function () {
  // `this` points to the vm instance
  return this.message.split('').reverse().join('')
 }
 }
})

watch

一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var vm = new Vue({
 data: {
 a: 1,
 b: 2,
 c: 3
 },
 watch: {
 // 监控a变量变化的时候,自动执行此函数
 a: function (val, oldVal) {
  console.log('new: %s, old: %s', val, oldVal)
 },
 // 深度 watcher
 c: {
  handler: function (val, oldVal) { /* ... */ },
  deep: true
 }
 }
})
vm.a = 2 // -> new: 2, old: 1

Vue 实例的生命周期

Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程,就是生命周期。

在Vue的整个生命周期中,它提供了一些生命周期钩子,给了我们执行自定义逻辑的机会。

接下来我们用几个例子来看看生命周期钩子是怎么用的:

HTML结构:

1
2
3
4
<div id="app">
 <p>{{ number }}</p>
 <input type="text" name="btnSetNumber" v-model="number">
</div>

我们对 input 和 p 绑定了data 对象的 number 数据,Vue 实例构建如下:

1
2
3
4
5
6
var app = new Vue({  
 el: '#app',   
 data: {    
  number: 1
 }
})

在实例中分别在每个生命周期钩子中 console.log('钩子名称',this.number) 我们发现,第一次页面加载时触发了 beforeCreate, created, beforeMount, mounted 这几个钩子,data 数据在 created 中可获取到。

再去 console.log('mounted: ', document.getElementsByTagName('p')[0]) ,DOM 渲染在 mounted 中已经
完成。

我们再试着去更改 input 输入框中的内容,可以看到输入框上方的数据同步发生改变,这就是数据绑定的效果,在更新数据时触发 beforeUpdate 和 updated 钩子,且在 beforeUpdate 触发时,数据已更新完毕。

而 destroy 仅在调用app.$destroy();时触发,对 vue 实例进行销毁。销毁完成后,我们再重新改变 number 的值,vue 不再对此动作进行响应了。但是原先生成的dom元素还存在,可以这么理解,执行了destroy操作,后续就不再受vue控制了。

Vue.nextTick

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

1
2
3
Vue.nextTick(function () {
 // DOM 更新了
})

官方还提供了一种写法,vm.$nextTick,用 this 自动绑定到调用它的实例上

1
2
3
4
5
6
7
8
created() {
 setTimeout(() => {
   this.number = 100
   this.$nextTick(() => {
   console.log('nextTick', document.getElementsByTagName('p')[0])
   })
 },100)
}

什么时候需要用的Vue.nextTick()

在 Vue 生命周期的 created() 钩子函数进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中。原因是什么呢,原因是在 created() 钩子函数执行的时候 DOM 其实并未进行任何渲染,而此时进行 DOM 操作无异于徒劳,所以此处一定要将 DOM 操作的 js 代码放进 Vue.nextTick() 的回调函数中。与之对应的就是 mounted 钩子函数,因为该钩子函数执行时所有的 DOM 挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。

在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的 DOM 结构的时候,这个操作都应该放进 Vue.nextTick() 的回调函数中。

生命周期小结

生命周期钩子的一些使用方法:

    1. beforecreate : 可以在这加个loading事件,在加载实例时触发
    2. created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用
    3. mounted : 挂载元素,获取到DOM节点
    4. updated : 如果对数据统一处理,在这里写上相应函数
    5. beforeDestroy : 可以做一个确认停止事件的确认框
    6. nextTick : 更新数据后立即操作dom

详解Vue 实例中的生命周期钩子的更多相关文章

  1. Vue 实例中的生命周期钩子

    Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...

  2. 详解服务器性能测试的全生命周期?——从测试、结果分析到优化策略(转载)

    服务器性能测试是一项非常重要而且必要的工作,本文是作者Micheal在对服务器进行性能测试的过程中不断摸索出来的一些实用策略,通过定位问题,分析原因以及解决问题,实现对服务器进行更有针对性的优化,提升 ...

  3. 了解angularjs中的生命周期钩子函数$onInit,$onChange,$onDestory,$postLink

     壹 ❀ 引 我在前面花了三篇文章用于介绍angularjs的指令directive,组件component,并专门花了一篇文章介绍directive与component的不同,其中提到在compon ...

  4. Vue.js系列:生命周期钩子

    开发人员提供了一个Web开发人员可以在Vue.js应用程序的整个生命周期中使用的各种方法的讨论. 生命周期钩子是在Vue对象生命周期的某个阶段执行的已定义方法.从初始化开始到它被破坏时,对象都会遵循不 ...

  5. Java Servlet详解(体系结构+注解配置+生命周期)

    Java Servlet详解(注解配置+生命周期) 什么是Servlet : (Server applet)? 顾名思义:服务端的小程序 Servlet只是一个接口,定义了Java被浏览器访问到(To ...

  6. Vue实例属性/方法/生命周期

    一 实例属性 var app = new Vue(); app.$el ===>返回当前挂在DOM对象. app.$data ===>返回当前实例data里面的数据 app.$option ...

  7. android Fragments详解六:处理fragement的生命周期

    把条目添加到动作栏 你的fragment们可以向activity的菜单(按Manu键时出现的东西)添加项,同时也可向动作栏(界面中顶部的那个区域)添加条目,这都需通过实现方法onCreateOptio ...

  8. Vue 封装的组件生命周期钩子

    export default { // ... // 在组件初始化时调用,可以简单理解为页面加载时 created () { // 存在 localStorage 的缓存内容 if (localSto ...

  9. vue 生命周期钩子函数

    实例中的生命周期钩子可以分为以下8种情况: beforeCreate: 实例刚被创建,vue所有属性都还不存在 created: 实例创建完成,但$el还不存在 beforeMount:挂载之前 mo ...

随机推荐

  1. MapReduce编程模型及其在Hadoop上的实现

    转自:https://www.zybuluo.com/frank-shaw/note/206604 MapReduce基本过程 关于MapReduce中数据流的传输过程,下图是一个经典演示:  关于上 ...

  2. SecureCRT介绍、安装、使用(转)

    http://blog.csdn.net/liang19890820/article/details/49701429 简介 SecureCRT是一款支持SSH(SSH1和SSH2)的终端仿真程序,简 ...

  3. Android 分享透明图片到微信变黑的问题

    /** * bitmap中的透明色用白色替换 * * @param bitmap * @return */ public static Bitmap changeColor(Bitmap bitmap ...

  4. 【IntelliJ IDEA】1.安装使用IntelliJ IDEA

    IntelliJ IDEA,初次接触,被赞许的收费版IDE环境. =================================================================== ...

  5. YOLO+yolo9000配置使用darknet

    Installing Darknet 1.直接设置使用,编译通过 git clone https://github.com/pjreddie/darknet.git cd darknet make 2 ...

  6. 【温故知新】——HTML5重要知识点复习

    前言:本文是自己在学习课程中的课程笔记,这里用来温故知新的,并非本人原创. 一.HTML5新特性 —— 十个新特性:凌乱 (1)新的语义标签 (2)增强型表单(表单2.0) (3)音频和视频 (4)C ...

  7. API测试工具postman使用总结

    一.Postman介绍: Postman是google开发的一款功能强大的网页调试与发送网页HTTP请求,并能运行测试用例的的Chrome插件,主要用于模拟网络请求包,快速创建请求,回放.管理请求,验 ...

  8. Spring2.5学习3.2_编码剖析@Resource注解的实现原理

    首先看一下J2EE提供的@Resource注解:该注解默认安照名称进行装配,名称能够通过name属性进行指定, 假设没有指定name属性,当注解写在字段上时,默认取字段名进行依照名称查找,假设注解写在 ...

  9. jenkins构建一个python项目

    Jenkins发布后端python代码 “系统管理”“管理插件”“已安装” 检查是否有“Git plugin”和“Publish Over SSH”两个插件,如果没有,则需点击“可选插件”,找到它 ...

  10. Win 8.1 安装后要做的优化

    ①无光驱恢复电脑或重置系统(无需插入介质,本来老提示插入介质) 1.准备工作:win8iso,解压到任意非系统盘,解压后的路径假如是:H:\OS\win8   2.接着以管理员身份启动命令提示符,输入 ...