学习Vue Part3 进阶属性

computed&watch

• computed：计算属性

• watch：监听

computed用于计算一个值，若一个数据依赖于其他的数据，那么将这个数据设为computed的。在调用时不需要加括号，且根据依赖会自动缓存，如果依赖不变，computed不会重新计算

watch为对data变化的监听，依赖的某个属性变化时就会执行回调，有两个选项 1. immediate是否立即执行 2. deep是否更深入监听 也可以使用 this.$watch // vm.$watch使用

---

指令Directive

声明一个全局指令，代码为

Vue.directive('x' , directiveOptions)

这样就可以在任何组件中使用v-x了

声明一个局部指令，代码为

new Vue({
... ,
directives:{
	"x":directiveOptions
	}
})

这样，v-x只能在该实例中使用。

---

directiveOptions

有五个函数属性：

1. bind(el,info,vnode.oldVnode) - 类似created
2. inserted(参数同上) - 类似mounted
3. update(参数同上) - 类似updated
4. componentUpdated(参数同上) - 用的不多，看文档
5. unbind(参数同上) - 类似destroyed

缩写：

directiveOptions在某些条件下可以缩写为函数，用的不多，看文档。

---

指令的作用：

用于DOM操作：

• Vue实例用于数据绑定，事件监听，DOM更新
• Vue指令主要目的就是原生DOM操作

减少重复：

• 如果某个DOM操作经常使用，可以封装为指令
• 如果某个DOM操作比较复杂，也可以封装为指令。

---

Mixin 混入

混入就是个复制

用于减少重复：

• directives的作用是减少DOM操作的重复，而mixins的作用是减少data、methods、钩子的重复
• 给多个组件添加的data、method和钩子可以放到mixins中，再“混入”组件中即可，混入过程中，多个同名选项会智能合并

---

extends 继承

继承也是个复制

extends就是比mixins更抽象一点的封装，实际工作中用的很少，大致了解一下，需要时看文档吧。

---

provide 和 inject 提供和注入

前人栽树（provide），后人乘凉（inject）。

将实例的属性提出来供其他模块使用。

作用：大范围的data和method等共用。

---

Vue的学习告一段落，接下来的路线有很多选择，脱产学习久了容易松懈，还是得继续努力。