[JavaScript知识库] Vue实例初始化的选项配置对象详解，前端开发主流框架

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue实例初始化的选项配置对象详解，前端开发主流框架 -> 正文阅读

[JavaScript知识库]Vue实例初始化的选项配置对象详解，前端开发主流框架

示例:


var vm = new Vue({

  data: { a: 1 },

  methods: {

    plus: function () {

      this.a++

    }

  }

})

vm.plus()

vm.a // 2

1.4. watch

类型

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

详细:

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

示例:


var vm = new Vue({

  data: {

  

  },

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>

1.5. 设置el的详解

类型

string | HTMLElement

限制：只在由 new 创建的实例中遵守。

详细：

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

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

如果这个选项在实例化时有作用，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。

// 几乎所有例子都用到这个，所以就不再赘述

var app = new Vue({

el: ‘#app’,

…

});

2. Vue实例的生命周期

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

在Vue的整个生命周期中，它提供了一系列的事件，可以让我们注册js方法，可以让我们达到控制整个过程的目的地，哇赛，[如果你搞过Asp.Net](

) WebForm的话，你会发现整个就是WebForm的翻版嘛哈哈。值得注意的是，在这些事件响应方法中的this直接指向的是vue的实例。

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

在这里插入图片描述Vue提供的可以注册的钩子都在上图片的红色框标注。他们是：

beforeCreate

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

created

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted

el 被新创建的 vm.el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时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))

    })

  }

}