创建Vue实例传入的options

创建Vue实例的时候,需要传入一个对象options,这个options可以包含很多选项。

官网详细解析:https://cn.vuejs.org/v2/api/#选项-数据

常用的选项

el

类型string | HTMLElement

作用:决定Vuew实例会管理哪一个DOM

data

类型Object | Function(组件当中data必须是一个函数)

作用:Vue实例对应的数据对象

methods

类型{[key: string]: Funtion}

作用:定义属于Vue的一些方法,可以在其他地方调用,也可以在指令中使用

computed

类型{ [key: string]: Function | { get: Function, set: Function } }

作用

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

注意如果你为一个计算属性使用了箭头函数,则 this 不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。

computed: {
aDouble: vm => vm.a * 2
}

计算属性的结果会被缓存,除非依赖的响应式 property 变化才会重新计算。注意,如果某个依赖 (比如非响应式 property) 在该实例范畴之外,则计算属性是不会被更新的。

watch

类型{ [key: string]: string | Function | Object | Array }

作用: 监听变量,变量修改是触发方法(实现多个变量依赖于一个变量)

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

示例
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3,
d: 4,
e: {
f: {
g: 5
}
}
},
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 方法名
b: 'someMethod',
// 该回调会在任何被侦听的对象的 property 改变时被调用,不论其被嵌套多深
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
// 该回调将会在侦听开始之后被立即调用
d: {
handler: 'someMethod',
immediate: true
},
// 你可以传入回调数组,它们会被逐一调用
e: [
'handle1',
function handle2 (val, oldVal) { /* ... */ },
{
handler: function handle3 (val, oldVal) { /* ... */ },
/* ... */
}
],
// watch vm.e.f's value: {g: 5}
'e.f': function (val, oldVal) { /* ... */ }
}
})
vm.a = 2 // => new: 2, old: 1

delimiters

类型Array<string>(默认值:["{{", "}}"])

作用:改变插值表达式符号({{}}),改变纯文本插入分隔符。

示例

new Vue({
delimiters: ['${', '}']
})

// 分隔符变成了 ES6 模板字符串的风格

生命周期钩子🪝

官网链接指路:https://cn.vuejs.org/v2/api/#选项-生命周期钩子

… …

beforeCreate:初始化实例后,调用前触发。

created:实例穿件完成后触发。

beforeMount:挂在开始前被调用。

mounted:el被请创建的vm.$el替换,并且挂载到实例上去后调用。

beforeUpdate:数据更新时调用,发生在虚拟DOM补丁之前。

updated:由于数据更改导致的虚拟DOM重新渲染和打补丁,之后调用。

activated:keep-alive 组件激活时调用

deactived:keep-alive 组件停用时调用

beforeDestory:实例销毁之前调用

destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

errorCaptured:当捕获一个来自子孙组件的错误时被调用