05-Vue入门系列之Vue实例详解与生命周期

时间  2019-11-13
标签 vue 入门 系列 实例 详解 生命周期 繁體版
原文   原文链接

Vue的实例是Vue框架的入口，其实也就是前端的ViewModel，它包含了页面中的业务逻辑处理、数据模型等，固然它也有本身的一系列的生命周期的事件钩子，辅助咱们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。html

5.1. Vue实例初始化的选项配置对象详解

前面咱们已经用了不少次 new Vue({...})的代码，并且Vue初始化的选项都已经用了data、methods、el、computedd等,估计您看到这里时，应该已经都明白了他们的做用，咱们就详细讲解一下他们的使用状况。更详细的请参考官网内容前端

5.1.1. Vue实例的的data对象

  • 介绍

Vue的实例的数据对象data 咱们已经用了不少了，数据绑定离不开data里面的数据。也是Vue的核心属性。 它是Vue绑定数据到HTML标签的数据源泉，另外Vue框架会自动监视data里面的数据变化，自动更新数据到HTML标签上去。本质原理是：Vue会自动将data里面的数据进行递归抓换成getter和setter，而后就能够自动更新HTML标签了，固然用getter和setter因此老的浏览器Vue支持的不够好。vue

  • data对象的类型：ios

    • 类型是Object或者Function。
    • 若是是组件对象中，data必须是Function类型。【后面学了组件后就明白了，暂时对组件先放放。】

  • 实例：git

// 建立普通的Vue实例
var vm = new Vue({
  data: data
})

// 组件定义【后面会详细讲的】
// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
  data: function () {   //这里必须是函数！！！！
    return { a: 1 }
  }
})

5.1.2. Vue实例的computed

  • 介绍

Vue的计算属性（computed)的属性会自动混入Vue的实例中。全部 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。这就很强大了，再计算属性中定义的函数里面能够直接使用指向了vue实例的this，异常方便的啊。es6

  • 类型

{ 键：函数} { [key: string]: Function | { get: Function, set: Function } } 固然，能够省略setter,若是省略了setter，那么值就能够是普通函数，可是必须有返回值。github

  • 官方的实例 
    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

5.1.3. methods

  • 类型: { [key: string]: Function }web

  • 详细:ajax

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

注意，不该该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级做用域的上下文，因此 this 将不会按照指望指向 Vue 实例，this.a 将是 undefined。

  • 示例:
var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2

5.1.4. watch

  • 类型

{ [key: string]: string | Function | Object }

  • 详细:

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

  • 示例:
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
//注意，不该该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级做用域的上下文，因此 this 将不会按照指望指向 Vue 实例，this.updateAutocomplete 将是 undefined。

参考综合案例：

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之数据监控</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{ number }}</p>
    <input type="button" name="btnGetNumber" value="增长" v-on:click="getNumber()">
  </div>
  <script>
    var app = new Vue({         
      el: '#app',               
      data: {                   
        number: 1
      },
      methods: {
        // 事件响应方法的逻辑代码
        getNumber: function (e) {
          this.number += 1;   // 不论是内联方法调用，仍是绑定事件处理器两种方式执行事件响应方法的时候 this都是指向 app
        }
      },
      watch: {
        // 监控number的变化，并自动执行下面的函数
        number: function (val, oldVal) {
          console.log('val:' + val + ' - oldVal: ' + oldVal);
        }
      }
    });
  </script>
</body>
</html>

5.1.5. 设置el的详解

  • 类型

string | HTMLElement

限制： 只在由 new 建立的实例中遵照。

  • 详细：

提供一个在页面上已存在的 DOM 元素做为 Vue 实例的挂载目标,也就是说Vue绑定数据到哪里去找。能够是CSS 选择器，也能够是一个 HTMLElement实例。

在实例挂载以后(生命周期的内容后面会详细讲的奥)， 元素能够用 vm.$el 访问。

若是这个选项在实例化时有做用，实例将当即进入编译过程，不然，须要显式调用 vm.$mount() 手动开启编译。

// 几乎全部例子都用到这个，因此就再也不赘述
var app = new Vue({         
  el: '#app',
  ...
});

5.2. Vue实例的生命周期

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

在Vue的整个生命周期中，它提供了一系列的事件，可让咱们注册js方法，可让咱们达到控制整个过程的目的地，哇赛，若是你搞过Asp.Net WebForm的话，你会发现整个就是WebForm的翻版嘛哈哈。值得注意的是，在这些事件响应方法中的this直接指向的是vue的实例。

首先看看下面官网的一张生命周期的图，我作一下标注，看看总体的流程，后面咱们上代码作一下效果。

vue生命周期

Vue提供的能够注册的钩子都在上图片的红色框标注。 他们是：

  • beforeCreate

在实例初始化以后，数据观测(data observer) 和 event/watcher 事件配置以前被调用。

  • created

实例已经建立完成以后被调用。在这一步，实例已完成如下的配置：数据观测(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 实例指示的全部东西都会解绑定，全部的事件监听器会被移除，全部的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

接下来咱们作一个例子，看一下Vue中全部的生命周期怎么用的。

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之生命周期</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{ number }}</p>
    <input type="text" name="btnSetNumber" v-model="number">
  </div>
  <script>
    var app = new Vue({         
      el: '#app',               
      data: {                   
        number: 1
      },
      beforeCreate: function () {
        console.log('beforeCreate 钩子执行...');
        console.log(this.number)
      },
      cteated: function () {
        console.log('cteated 钩子执行...');
        console.log(this.number)
      },
      beforeMount: function () {
        console.log('beforeMount 钩子执行...');
        console.log(this.number)
      },
      mounted: function () {
        console.log('mounted 钩子执行...');
        console.log(this.number)
      },
      beforeUpdate: function () {
        console.log('beforeUpdate 钩子执行...');
        console.log(this.number)
      },
      updated: function () {
        console.log('updated 钩子执行...');
        console.log(this.number)
      },
      beforeDestroy: function () {
        console.log('beforeDestroy 钩子执行...');
        console.log(this.number)
      },
      destroyed: function () {
        console.log('destroyed 钩子执行...');
        console.log(this.number)
      },
    });
  </script>
</body>
</html>

再看一个综合的实战的例子，可能涉及到ajax和组件，不过先看一下vue的生命周期的例子的用法：

import Axios from 'axios'       // 这是一个轻量级的ajax库，import是es6模块导入的语法。
export default {                // 这是一个vue的模块，后面讲奥。
  name: 'app',
  components: {
  },
  data: function () {
    return {
      list: []
    }
  },
  mounted: function () {          // 挂在完成后的生命周期钩子注册。
    this.$nextTick(function () {  // 等待下一次更新完成后执行业务处理代码。
      Axios.get('/api/menulist', {// 将回调延迟到下次 DOM 更新循环以后执行。在修改数据以后当即使用它，而后等待 DOM 更新
        params: {
        }
      }).then(function (res) {
        this.list = res.data
      }.bind(this))
    })
  }
}

5.3. Vue实例的全局配置

这一块都是一些小的知识点，我就不赘述了，直接copy 官网 Vue.config 是一个对象，包含 Vue 的全局配置。能够在启动应用以前修改下列属性：

  • silent

    • 类型： boolean

    • 默认值： false

    • 用法：

      Vue.config.silent = true
//取消 Vue 全部的日志与警告。

  • optionMergeStrategies

    • 类型： { [key: string]: Function }

    • 默认值： {}

    • 用法：

      Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {
return child + 1
}
const Profile = Vue.extend({
_my_option: 1
})
// Profile.options._my_option = 2
//自定义合并策略的选项。
//合并策略选项分别接受第一个参数做为父实例，第二个参数为子实例，Vue实例上下文被做为第三个参数传入。

  • devtools

    • 类型： boolean

    • 默认值： true (生产版为 false)

    • 用法：

      // 务必在加载 Vue 以后，当即同步设置如下内容
Vue.config.devtools = true
//配置是否容许 vue-devtools 检查代码。开发版本默认为 true，生产版本默认为 false。生产版本设为 true 能够启用检查。

  • errorHandler

    • 类型： Function

    • 默认值： 默认抛出错误

    • 用法：

      Vue.config.errorHandler = function (err, vm) {
// handle error
}
//指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获取错误信息和 Vue 实例。
//Sentry, an error tracking service, provides official integration using this option.

  • ignoredElements

    • 类型: Array

    • 默认值: []

    • 用法:

      Vue.config.ignoredElements = [
'my-custom-web-component', 'another-web-component'
]
须使 Vue 忽略在 Vue 以外的自定义元素 (e.g., 使用了 Web Components APIs)。不然，它会假设你忘记注册全局组件或者拼错了组件名称，从而抛出一个关于 Unknown custom element 的警告。

  • keyCodes

    • 类型： { [key: string]: number | Array }

    • 默认值： {}

    • 用法：

      Vue.config.keyCodes = {
v: 86,
f1: 112,
mediaPlayPause: 179,
up: [38, 87]
}api
//给 v-on 自定义键位别名。

5.4. Vue的全局API

Vue的全局API提供大量的功能，我这里就给你们罗列几个经常使用的结果，其余的仍是参考官网.

5.4.1. Vue.nextTick

语法： Vue.nextTick( [callback, context] )

参数：    
{Function} [callback]
{Object} [context]

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

// 修改数据
vm.msg = 'Hello'
// DOM 尚未更新
Vue.nextTick(function () {
  // DOM 更新了
})

5.4.2. Vue.set

语法： Vue.set( object, key, value )

参数：
{Object} object
{string} key
{any} value
返回值： 设置的值.

用法：
设置对象的属性。若是对象是响应式的，确保属性被建立后也是响应式的，同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。 注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

5.4.3. Vue.compile

  • 语法：

Vue.compile( template )

  • 参数：

{string} template

  • 用法：
//在render函数中编译模板字符串。只在独立构建时有效
var res = Vue.compile('<div><span>{{ msg }}</span></div>')
new Vue({
  data: {
    msg: 'hello'
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
})

5.4.4. 全局API总结

其实还有几个其余的全局API，不打算在这里讲了，好比扩展组件Vue.extend 的用法、Vue.use加载插件、Vue.filter加载过滤器、Vue.directive自定义指令等 后面再讲其余Vue的知识点的时候，再加上这些，全局API其实就是Vue类型的静态方法，全局范围内均可以使用的，某些实例的方法本质也是调用了这些全局的，后面用到时候再说。

5.5. Vue实例与生命周期总结

Vue的实例封装的仍是挺有艺术性的，很符合开发者的思惟规范，它的生命周期也很是清晰，使用起来也很是方便。Vue确实一个好框架。

其余章节详情请参考：http://aicoder.com/vue/preview/all.html

Github地址：源码下载

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程