Vue 实例
构造器
每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的:
var vm = new Vue({
...
});
在实例化 Vue 时,需要出入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部选项:API 文档
所有的 Vue.js 组件其实都是被扩展的 Vue 实例。
数据与方法
每个 Vue 实例都会代理其 data 对象里的所有的属性,当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3
只有这些被代理的属性是响应的,如果在实例创建后添加新的属性到实例上,它是不会触发视图更新的。
除了 data 属性,Vue实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $ ,以便与代理的 data 属性区分:
var data = { a: 1 }
var vm = new Vue({
el: '#eg',
data: data
})
console.log(vm.$el);
console.log("vm.$data:",vm.$data);
})
所以,以_或$开头的属性不会被Vue实例代理,因为它们可能和Vue内置的属性、API方法冲突。
不要在实例属性或者回调函数中使用箭头函数。因为箭头函数绑定父级上下文,所以 this 不会像预想的一样是 Vue 实例。
实例属性和方法的完整列表中查阅 API 参考。
常用选项
1. 数据
1)data
- 类型:Object | Function
- 详细: Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。
实例创建之后,可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性,因此访问 vm.a 等价于访问 vm.$data.a。
当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象。 - 示例:
var data = {a:1};
var vm = new Vue({
el : "#app1",
data : data
});
vm.a; ==>1
vm.$data === data; ==>true
vm.a === vm.$data.a; ==>true
2) props
- 类型:Array(string) | Object
- 详细:用于接收来自父组件的数据。因为组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的 props 选项。
- 示例
<div id="app2">
<mydemo message="hey jude"></mydemo>
</div>
Vue.component("mydemo" , {
props : ["message"],
template : "<span>{{message}}</span>"
});
var app2 = new Vue({
el : "#app2"
});
---------------------------------------------------------------------------------------------
// 对象语法,提供校验
Vue.component('props-demo-advanced', {
props: {
// 只检测类型
height: Number,
// 检测类型 + 其他验证
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})
3) propsData
- 类型:{ [key : string] : any }
- 详细:创建实例时传递 props。主要作用是方便测试。
- 限制: 只用于 new 创建的实例中。
<div id="app2"> </div>
var Comp = Vue.extend({
props : ["message"],
template : "<span>{{message}}</span>"
});
var app2 = new Comp({
el : "#app2",
propsData : {
message : "mmmm"
}
});
4) computed
- 类型:{ [key: string]: Function | { get: Function, set: Function } }
- 详细:计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
- 限制:切勿使用箭头函数来定义计算属性函数 (例如 aDouble: () => this.a * 2)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.a 将是 undefined。
- 示例:
var vm = new Vue({
data : {a:1},
computed : {
aDouble : function() {
return this.a*2;
},
aPlus : {
get : function(){
return this.a + 1;
},
set : function(v){
this.a = v- 1;
}
}
}
});
console.log(vm.aDouble); //2
console.log(vm.aPlus); //2
console.log(vm.a); //1
vm.aPlus = 3;
console.log(vm.a); //2
5) 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
6) watch
- 类型:{ [key: string]: string | Function | Object }
- 详细:一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。
- 示例:
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3
},
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 方法名
b: 'someMethod',
// 深度 watcher
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
}
}
})
vm.a = 2; //new: 2, old: 1
2.DOM
1)el
-
类型:string | HTMLElement
-
限制:只在由 new 创建的实例中遵守
-
详情:
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。在实例挂载之后,元素可以用 vm.$el 访问。
如果这个选项在实例化时有作用,实例将立即进入编译过程,否则,需要显式调用 vm.$mount() 手动开启编译。
2)template
-
类型:string
-
详细:
一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发 slot。如果值以 # 开始,则它用作选项符,将使用匹配元素的 innerHTML 作为模板。常用的技巧是用 <script type="x-template"> 包含模板。
3)render
-
类型:(createElement: () => VNode) => VNode
-
详细:
字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力。render 函数接收一个 createElement 方法作为第一个参数用来创建 VNode。如果组件是一个函数组件,渲染函数还会接收一个额外的 context 参数,为没有实例的函数组件提供上下文信息。
-
注意:Vue 选项中的 render 函数若存在,则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译 render 函数。
4)renderError
-
类型:(createElement: () => VNode, error: Error) => VNode
-
详细:
只在开发者环境下工作。当 render 函数遭遇错误时,提供另外一种渲染输出。其错误将会作为第二个参数传递到 renderError。这个功能配合 hot-reload 非常实用。
-
示例:
new Vue({
render (h) {
throw new Error('oops')
},
renderError (h, err) {
return h('pre', { style: { color: 'red' }}, err.stack)
}
}).$mount('#app')
3.生命周期钩子
所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着 你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文,因此 this 与你期待的 Vue 实例不同,this.fetchTodos 的行为未定义。
1)beforeCreate
-
类型:Function
-
详细:
在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
2)created
-
类型:Function
-
详细:
实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el
属性目前不可见。
3)beforeMount
-
类型:Function
-
详细:
在挂载开始之前被调用:相关的 render
函数首次被调用。
该钩子在服务器端渲染期间不被调用。
=====================================================
实例生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ,然后在数据变化时更新 DOM 。在这个过程中,实例也会调用一些 生命周期钩子 ,这就给我们提供了执行自定义逻辑的机会。钩子的 this 指向调用它的 Vue 实例。
作者:ewbar7
链接:https://www.jianshu.com/p/0a9667ac36d6
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。