Vue构造选项的相关探索
【目录】
一、options里面有什么？
二、el
三、data
四、methods
五、components
六、四个钩子
七、props
【正文】
对Vue构造选项的相关探索从这个内存图开始
需要知道的点 :
- 把Vue的实例命名为vm是尤雨溪的习惯，我们默认的话也选择沿用即可
- Vue对象封装了对视图的所有操作，包括数据读写、事件绑定、DOM更新
- vm的构造函数是Vue，按照ES6的说法，vm所属的类是Vue
- optioins是
new Vue的参数，一般称之为选项或构造选项
一、options里面有什么？
options的五类属性
-
数据 : data、props、propsData、computed、methods、watch
-
DOM : el、template、render、renderError
-
生命周期钩子 : beforeCreate、created、beforeMount、mounted、beforeUpdate、upDateed、activated、deactivated、beforeDestroy、destroyed、errorCaptured
-
资源 : directives、filters、components
-
组合 : parent、mixins、extends、provide、inject
二、el
el : 挂载点（可以用$mount代替）
-
类型 :
Element -
只读
-
详细 : Vue 实例使用的根 DOM 元素。
代码示例 :
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
})
三、data
data : 内部数据（支持对象和函数，优先用函数）
-
类型 : Object | Function
-
限制 : 组件的定义只接受 function。
-
详细 : 示例代码如下
var data = { a: 1 }
// 直接创建一个实例
var vm = new Vue({
data: data
})
vm.a // => 1
vm.$data === data // => true
// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
data: function () {
return { a: 1 }
}
})
四、methods
methods : 方法（事件处理函数或者是普通函数）
-
类型 : { [key: string]: Function }
-
详细 : methods 将被混入到 Vue 实例中。可以直接通过 vm 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
代码示例如下 :
var vm = new Vue({
data: { a: 1 },
methods: {
plus: function () {
this.a++
}
}
})
vm.plus()
vm.a // 2
五、components
-
类型 : Object
-
详细 : 包含 Vue 实例可用组件的哈希表。
三种引入方式
1、第一种引入方式(推荐方式一，因为较为模块化)
import Demo from './Demo.vue'
new Vue(
components:{
Frank:Demo
}
}).$mount('#frank')
2、第二种引入方式
Vue.component('Demo2',{
template:`
<div>123</div>
`
})
3、第三种引入方式
new Vue(
components:{
Frank:{
template:`
<div>123</div>
`}
}
}).$mount('#frank')
六、四个钩子
1、created : 实例出现在内存中
-
类型：Function
-
详细：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前尚不可用。
2、 mounted : 实例出现在页面中
-
类型 : Function
-
详细 : 实例被挂载后调用，这时
el被新创建的vm.$el替换了。如果根实例挂载到了一个文档内的元素上，当mounted被调用时vm.$el也在文档内。
( 注意 mounted不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在mounted内部使用 vm.$nextTick：)
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
该钩子在服务器端渲染期间不被调用。
3、updated : 实例更新
-
类型 : Function
-
详细 : 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
( 注意 updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick：)
updated: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
})
}
该钩子在服务器端渲染期间不被调用。
4、destroyed : 实例从页面和内存中消亡了
-
类型 : Function
-
详细 : 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
该钩子在服务器端渲染期间不被调用。
七、props
props : 外部数据，也叫属性
-
类型 : Array<string> | Object
-
详细 : props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。
代码示例 :
// 简单语法
Vue.component('props-demo-simple', {
props: ['size', 'myMessage']
})
// 对象语法，提供验证
Vue.component('props-demo-advanced', {
props: {
// 检测类型
height: Number,
// 检测类型 + 其他验证
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})
注 :
- message="n" : 传入字符串
- :message="n"传入this.n数据
- :fn="add"传入this.add函数
