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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ClamReason/article/details/82991817

Vue的构造函数至关重要!

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

这里仅仅把最常用的参数,以及这背后的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的行为未定义。

猜你喜欢

转载自blog.csdn.net/ClamReason/article/details/82991817