轻量化的前端UI框架—–Vue.js
本文拿vue对比其他前端框架,介绍它的强大之处,我会列出相应的实例供大家参考,具体功能可以参考官方API:
- Virtual DOM(虚拟DOM)
- 组件化应用
Vue 专注于创造前端的富应用。不同于早期的JavaScript框架“功能齐全”,Vue只有框架的骨架,其他的功能如路由、状态管理等是框架分离的组件。
虚拟DOM
所谓的Virtual DOM基本上说就是它名字的意思:虚拟DOM,DOM树的虚拟表现。它的诞生是基于这么一个概念:改变真实的DOM状态远比改变一个JavaScript对象的花销要大得多。
Virtual DOM是一个映射真实DOM的JavaScript对象,如果需要改变任何元素的状态,那么是先在Virtual DOM上进行改变,而不是直接改变真实的DOM。当有变化产生时,一个新的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。之后这些差别会应用在真实的DOM上。
那么vue是怎么操作虚拟DOM的呢?是的,他是通过Vue实例;
Vue实例
每个 Vue.js 应用都是通过构造函数 Vue
创建一个 Vue 的根实例 启动的:
<script>
var vm = new Vue({
// 选项
})
</script>
在实例化 Vue 时,需要传入一个选项对象
,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。
一、选项——数据
1. data
类型: object | Function
限制:组件的定义只接受 function。
举个栗子:
<script>
var data = { a: 1 }
// 直接创建一个实例
var vm = new Vue({
data: data
})
vm.a // -> 1
vm.$data === data // -> true
// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
data: function () {//限制(组件的定义只接受 function)
return { a: 1 }
}
})
</script>
2. props
类型: Array<string> | Object
props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义校验和设置默认值。
举个栗子:
<script>
// 简单语法
Vue.component('props-demo-simple', {
props: ['size', 'myMessage']
})
// 对象语法,提供校验
Vue.component('props-demo-advanced', {
props: {
// 只检测类型
height: Number,
// 检测类型 + 其他验证
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})
</script>
3. computed
类型: { [key: string]: Function | { get: Function, set: Function } }
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
举个栗子:
<script>
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
}
}
}
})
vm.aPlus // -> 2 未传参数,所以进入aPlus的get方法
console.log(vm.aPlus); // -> 2
vm.aPlus = 3 //传参数 v=3,所以进入aPlus的set方法
console.log(vm.a); // -> 2
vm.a // -> 2
console.log(vm.a); // -> 2
vm.aDouble // -> 4
console.log(vm.aDouble); // -> 4
</script>
计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果实例范畴之外的依赖 (比如非响应式的 not reactive) 是不会触发计算属性更新的。
4. methods
类型: { [key: string]: Function }
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
举个栗子:
<script>
var vm = new Vue({
data: { a: 1 },
methods: {
plus: function () {
this.a++
}
}
})
vm.plus()
vm.a // 2
</script>
5. watch
类型:{ [key: string]: string | Function | Object }
一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。
<script>
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
</script>
二、选项——DOM
1. el
类型:string | HTMLElement
限制: 只在由 new 创建的实例中遵守。
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。
在实例挂载之后, 元素可以用 vm.$el 访问。
如果这个选项在实例化时有作用,实例将立即进入编译过程,否则,需要显式调用 vm.$mount() 手动开启编译。
2. template
类型:string
一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发 slot。
如果值以 # 开始,则它用作选项符,将使用匹配元素的 innerHTML 作为模板。常用的技巧是用
3. render
类型:(createElement: () => VNode) => VNode
字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力。render 函数接收一个 createElement 方法作为第一个参数用来创建 VNode。
如果组件是一个函数组件,Render 函数还会接收一个额外的 context 参数,为没有实例的函数组件提供上下文信息。
三、选项——生命周期钩子
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ,然后在数据变化时更新 DOM 。在这个过程中,实例也会调用一些 生命周期钩子
,这就给我们提供了执行自定义逻辑的机会。例如,created 这个钩子在实例被创建之后被调用:
<script>
var vm = new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// -> "a is: 1"
</script>
也有一些其它的钩子,在实例生命周期的不同阶段调用,如 mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例
下面展示的是实例的生命周期图
1. beforeCreate
类型:Function
在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
2. created
类型:Function
实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
3. beforeMount
类型:Function
在挂载开始之前被调用:相关的 render 函数首次被调用。
该钩子在服务器端渲染期间不被调用。
4. mounted
类型:Function
el 被新创建的 vm.
el替换,并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素,当mounted被调用时vm.
el 也在文档内。
该钩子在服务器端渲染期间不被调用。
5. beforeUpdate
类型:Function
数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
该钩子在服务器端渲染期间不被调用。
6. update
类型:Function
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。
该钩子在服务器端渲染期间不被调用。
7. activated
类型:Function
keep-alive 组件激活时调用。
该钩子在服务器端渲染期间不被调用。
8. deactivated
类型:Function
keep-alive 组件停用时调用。
该钩子在服务器端渲染期间不被调用。
9. beforeDestory
类型:Function
实例销毁之前调用。在这一步,实例仍然完全可用。
该钩子在服务器端渲染期间不被调用。
10. destoryed
类型:Function
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
该钩子在服务器端渲染期间不被调用。