Vue是如何触发组件更新的？

Posted 2022-04-12 aiguangyuan

Vue是数据驱动的一个视图框架，所谓数据驱动就是DOM是通过数据来映射的，只有在数据改变的情况下视图才会发生改变。

正常情况下千万不要手工去操作DOM，这样会引发一些不可预知的问题产生。

Vue中的数据主要来自三个部分：

1. 来自父元素的属性props；

2. 来自组件自身的状态data；

3. 来自状态管理器vuex；

状态data与属性props的区别：

1. 状态是组件自身的数据；

2. 属性是来自父组件的数据；

3. 状态的改变未必会触发更新；

4. 属性的改变未必会触发更新；

属性触发组件更新的必要条件：

1. 模板中绑定的变量必须是响应式的的；

2. 模板中绑定的变量必须显示的声明为响应式的，响应式数据如果有多层级的，不能只声明外层数据；

3. 模板中没有用到的变量，即使修改了也不会触发组件的更新；

Vue在实例化的时候，会对data下面的数据进行getter和setter的转化，所谓的转化就是对这个数据做了一个中间的代理层，不管是取数据也好，还是设置数据重新赋值也好，都会经过代理层然后去执行相应的操作。组件在渲染的时候，data里面的数据在模板中用到了它，就会把它放到watcher中，在wacher中的数据修改时就会触发组件更新，反之，如果没有用到数据就不会进入watcher中，修改这些数据时就不会触发组件更新。