- 理解MVC（数据层和表现层）的使用逻辑
- 使用Vue组件的生命周期和钩子函数
- 使用全局的Filters
- Slot、ref、nextTick等属性或方法的使用
- Watch函数
- 避免数据更改并没有触发视图更新的错误
- 更进阶的使用：mixin、directives等
什么是MVC
Model 负责具体的数据
Controller 负责根据业务对数据进行操作
View 负责根据此刻的数据渲染对应的视图
MVC示意
当我使用MVC模式开发时的思路
- M只关心数据，托管所有View需要的数据
- C只关心用户行为，和对数据的操作。某个按钮会触发某个行为，这个行为需要修改哪些M
- V只关心M，并根据M的具体值，渲染页面
基于这样的思路请尽量避免：
- 在JS里操作DOM。（C只修改数据，数据的变动自然会触发V的更新）
- 设计过多的Model。（过多的Model会让你的View结构混乱，M与V之间的关系不清）
什么是生命周期
- 任何组件（包括IOS，安卓内的类）都有他的生命周期 。
- 生命周期通常有 创建(create)、挂载(mounted)、更新(update)、销毁(destory)四种
- 生命周期内的每一个动作通常都有前后两个钩子函数
Vue组件的生命周期
使用全局的filter
全局filter的定义及使用
- 复用性高的过滤器要挂靠全局
- 此外还有全局的Vue.component(); Vue.directive()
slot、ref、nextTick等属性或方法的使用
使用slot分发组件内容
slot的name属性分发不同的html
使用ref选择Dom和组件
- 选择DOM效果相等于document.getElement
使用ref获取DOM
- 组件
可使用组件的$emit
在组件中监听对应的事件
使用nextTick触发视图更新
适用场景：
需要更新视图后才能获取正确的一些属性
nextTick的使用方法
使用Watch函数监听属性变化
wath内监听某值的变化
适用场景：
需要监听props的变化并做一些较复杂的更新
避免数据更改并没有触发视图更新的错误
Vue.set(vm.someObject, 'b', 2)
this.$set(this.someObject,'b',2)
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject =
Object.assign({}, this.someObject, { a: 1, b: 2 })
更新数组
vm.userList = array.map(function(u) {
u.checked = false;
return u;
});
