vue-实例

创建vue实例

创建vue实例时，可接收如下几个对象

data

作用：实例的数据对象
类型：object|Function
注：当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象

props

作用：接收来自父组件的数据
类型：Array<props>|Object
注：使用Object可以定义属性的数据类型、校验规则、默认值

propsData

作用：创建实例时传递props
类型：{[key:string]:any}
注：只用于new创建的实例中

computed

作用：处理复杂逻辑
类型：{ [key: string]: Function | { get: Function, set: Function } }
注：计算属性的结果会被缓存，除非依赖的响应属性变化才会重新计算

methods

作用：定义方法.可以通过实例直接访问，也可以在指令表达式中使用
类型：{[key:string]:Function}

watch

作用：对属性或者方法进行监听
类型：{[key:string]:string|Function|Object|Array}

数据与方法

注：
1.当数据改变时，视图会进行重新渲染。但也只用当实例被创建时的data中存在的属性才是响应式的
2.使用Object.freeze()可以阻止修改现有的属性，后续再改变其值，不会再触发页面的响应式更新

var data = { a: 1 }

var vm = new Vue({
  data: data
})
vm.b=2;//不会触发视图的响应式更新，因为b属性没有在data中被定义

Object.freeze(data);
vm.a=2;//不会触发视图的更新

实例属性

属性	类型	作用
vm.$data	Object	该实例的数据对象
vm.$props	Object	当前组件接收到的props对象
vm.$el	HTMLElement	vue实例使用的根DOM元素
vm.$parent	vue instance	父实例，如果有的话
vm.$root	vue instance	根实例，如果没有，则表示它自己
vm.$children	Array<vue instance>	当前实例的子组件。不保证顺序，也不是响应式的
vm.$slots	{[name:string]:?Array<VNode>}	被插槽分发
vm.$refs	Object	注册过ref特性的所有DOM元素和组件实例
vm.$isServer	boolean	当前vue实例是否运行于服务器

生命周期

钩子	详细说明
beforeCreate	在实例初始化之后，数据观测和event/watcher事件配置之前被调用
created	实例初始化之后，在这一步，实例已完成数据、属性和方法的运算，watch/event回调，然而挂载阶段还没开始，$el属性目前不可见
beforeMount	挂载开始之前被调用，render函数首次被调用
mounted	挂载到实例上去之后调用该钩子。mounted不承诺所有的子组件也都一起被挂载，如果希望整个视图都渲染完毕，可以用vm.$nextTick替换掉mounted
beforeUpdate	数据更新时调用。适合在更新之前访问现有的dom
updated	组件dom已经完成更新
activated	keep-alive组件激活时调用
deactivated	keep-alive组件停用时调用
beforeDestory	实例销毁前调用
destoryed	实例销毁后调用，实例中的所有事件监听、子实例都会解绑
errorCaptured	没用过

5/100