- 理解MVC（数据层和表现层）的使用逻辑
- 使用Vue组件的生命周期和钩子函数
- 使用全局的Filters
- Slot、ref、nextTick等属性或方法的使用
- Watch函数
- 避免数据更改并没有触发视图更新的错误
- 更进阶的使用：mixin、directives等
什么是MVC
Model 负责具体的数据
Controller 负责根据业务对数据进行操作
View 负责根据此刻的数据渲染对应的视图
当我使用MVC模式开发时的思路
- M只关心数据，托管所有View需要的数据
- C只关心用户行为，和对数据的操作。某个按钮会触发某个行为，这个行为需要修改哪些M
- V只关心M，并根据M的具体值，渲染页面
基于这样的思路请尽量避免：
- 在JS里操作DOM。（C只修改数据，数据的变动自然会触发V的更新）
- 设计过多的Model。（过多的Model会让你的View结构混乱，M与V之间的关系不清）
什么是生命周期
- 任何组件（包括IOS，安卓内的类）都有他的生命周期 。
- 生命周期通常有 创建(create)、挂载(mounted)、更新(update)、销毁(destory)四种
- 生命周期内的每一个动作通常都有前后两个钩子函数
使用全局的filter
- 复用性高的过滤器要挂靠全局
- 此外还有全局的Vue.component(); Vue.directive()
slot、ref、nextTick等属性或方法的使用
使用slot分发组件内容
使用ref选择Dom和组件
- 选择DOM效果相等于document.getElement
- 组件
使用nextTick触发视图更新
适用场景：
需要更新视图后才能获取正确的一些属性
使用Watch函数监听属性变化
适用场景：
需要监听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;
});
版权声明：本文来源简书，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://www.jianshu.com/p/1e32911d2d4a
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。
