vue数据更新原理
设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。(代码分层, 架构设计)
-
MVVM，一种软件架构模式，决定了写代码的思想和层次
- M： model数据模型 (data里定义)
- V： view视图 （页面标签）
- VM： ViewModel视图模型 (vue.js源码)
-
MVVM通过
数据双向绑定让数据自动地双向同步 不再需要操作DOM-
V （修改视图） -> M（数据自动同步）
-
M（修改数据） -> V （视图自动同步）
-
vue数据更新是通过MVVM来实现的, 数据更新会影响视图, 但是这个过程是异步的,(为什么是异步的,结合vue虚拟dom即可解释) 这就意味着如果再一个函数中修改了数据, 如果想要拿到更新后的数据需要通过一些手段来实现:
- 1. 可以在vue生命周期的钩子函数updated中拿到数据
- 2. 借助this.$nextTick(() => {document.queselecte('').innerHtml})
this.$nextTick()
this.$nextTick(() => {}) , 回调函数也是一个异步的会等到页面更新完成之后去执行, 应用场景, 人资项目中, 编辑部门,获取门详细信息回填到页面中, 这里要先向子组件传值, 子组件获取到传过来的值,此方法调用才有效, 在this.$nextTick()中获取子组件并调用子组件的方法
