创建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: { |
计算属性的结果会被缓存,除非依赖的响应式 property 变化才会重新计算。注意,如果某个依赖 (比如非响应式 property) 在该实例范畴之外,则计算属性是不会被更新的。
watch
类型:{ [key: string]: string | Function | Object | Array }
作用: 监听变量,变量修改是触发方法(实现多个变量依赖于一个变量)
一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()
,遍历 watch 对象的每一个 property。
示例
var vm = new Vue({ |
delimiters
类型:Array<string>
(默认值:["{{", "}}"]
)
作用:改变插值表达式符号({{}}
),改变纯文本插入分隔符。
示例:
new Vue({ |
生命周期钩子🪝
官网链接指路: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:当捕获一个来自子孙组件的错误时被调用