Vue.js进阶【2-0】Vue 构造函数的参数

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 实例到  或者  上。

选项 / 生命周期钩子

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

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

 

 

 

 

你可能感兴趣的:(Vue.js进阶教程)