您的位置:首页 > 产品设计 > UI/UE

vue学习总结:响应式系统&vue实例

2017-03-14 20:13 501 查看

响应式系统

vue是一个帮助用户构建界面的前端框架,它的核心是一个响应式的数据绑定系统,通过数据来驱动页面显示的更新,而不是像jquery那样通过操作DOM来改变页面的显示。



vue通过ViewModal来实现数据和DOM的双向数据绑定。这是如何实现的呢?

当我们把一个普通的js对象传给Vue实例的data选项后,Vue将遍历这个对象所有的属性,并使用Object.defineProperty 把这些属性全部转为 getter/setter。

每个组件实例都有相应的watcher实例对象,他会在组件渲染的过程中把属性记录为依赖,当依赖项的setter被调用时,会通知watcher重新计算,从而使它关联的组件得以更新。



由于Vue不能检测对象属性的添加或删除。 由于Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。

因此要在初始化实例前声明响应式属性,哪怕只是一个空值:

var vm = new Vue({
data: {
// 声明 message 为一个空值字符串
message: ''
}
})


vue是异步执行DOM更新的。

只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会一次推入到队列中。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。

然后在下一个的事件循环“tick”中,Vue 刷新队列并执行实际更新工作。

Vue实例

每一个Vue的应用都是通过创建一个Vue的实例来启动的。

var vm = new Vue({
//options……
})


选项

在实例化时,需要传入一个选项对象,一般需要使用的选项如下:

el

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。

在实例挂载之后, 元素可以用 vm.$el 访问。

如果这个选项在实例化时有作用,实例将立即进入编译过程,否则,需要显式调用 vm.$mount() 手动开启编译。

//立即编译
var vm = new Vue({
el:"#app"
})

//手动挂载,开启编译
var vm = new Vue({
//……
}).$mount("#app")


data

Vue实例的数据对象,Vue将会递归data的属性并转换为getter/setter,只有data内的数据属性是响应的。

但是在组件定义中,data必须声明返回数据对象的函数。因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象。

var vm = new Vue({
data:{
name:'abc'
}
});

//组件定义中,data必须是函数
var Component = Vue.extend({
data: function () {
return { a: 1 }
}
})


注意,不应该对 data 属性使用箭头函数 (例如
data: () => { return { a: this.myProp }}
)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例

methods

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

注意,不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例

var vm = new Vue({
data: { a: 1 },
methods: {
plus: function () {
this.a++
}
}
})
vm.plus()
vm.a // 2


computed

vue实例的计算属性,与methods的区别是:计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。

这意味着只要某个方法依赖的值没有改变,计算属性会立即返回之前的计算结果而不必再次执行函数。

而methods中的方法则总会执行

template

一个字符串模板作为 Vue 实例的标识使用。

模板将会 替换 挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发 slot。

components

包含 Vue 实例可用组件的哈希表。

生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。

例如,实例需要配置数据观测、编译模版、挂载实例到 DOM ,然后在数据变化时更新 DOM 。

在这个生命周期过程中,实例会调用一些生命周期钩子,我们就可以在这些钩子中自定义逻辑。



beforeCreate:在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created:实例已经创建完成之后被调用。然而,挂载阶段还没开始,$el 属性目前不可见。

beforeMount:在挂载开始之前被调用

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

beforeUpdate:数据更新时调用

updated:组件DOM已更新完毕

beforeDestroy:实例销毁之前调用

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

所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算。

这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文,因此 this 与你期待的 Vue 实例不同.

var vm = new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
},
mounted:function(){}
})
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  vue