Vue.js进阶【2-0】Vue对象与生命周期管理

Vue.js进阶文章列表

Vue的构造函数至关重要！

里面的参数也数量众多，完整的参数列表可以参考：官方的Vue构造函数API

这里不得不提到尤雨溪推荐的一篇介绍Vue2.1.7源码学习的一个文章：http://hcysun.me/2017/03/03/Vue%E6%BA%90%E7%A0%81%E5%AD%A6%E4%B9%A0/

这篇文章以超级大白话，超级简单的代码展示了Vue的构造函数、构造函数的参数、执行过程等等，可以说非常棒的一篇文章！

这里仅仅把最常用的参数，以及这背后的Vue理念做一个简单的介绍。为了自己翻阅方便。

选项 / 数据

data

• data Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。
• props
• propsData
• computed
• methods methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。2018-10-12
• watch

对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的属性会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。

选项 / DOM

el   

• el
• template  一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。2018-10-12
• render
• renderError

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。

提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 <html> 或者 <body> 上。

实例生命周期钩子 官方教程

选项 / 生命周期钩子

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同，this.fetchTodos的行为未定义。

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• activated
• deactivated
• beforeDestroy
• destroyed
• errorCaptured

nextTick

this.$nextTick是当dom发生变化更新后执行的回调。setTimeout只是一个异步延迟执行

如果我有个摄像头隐藏再打开的话，下次打开动作一定要在这个函数里面写，好让所有准备工作都完成了再打开摄像头。

        this.$nextTick(() => {
          //下次渲染完再执行这个方法
          this.getMedia();
        });