vue的基本原理

一、vue的基本原理。

当-个Vue实例创建时，Vue会遍历data中的属性，用Object.defineProperty (vue3.0使用proxy) 将它们转为getter/setter,并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

二、Computed和Watch的区别。

Computed:

(1)它支持缓存，只有依赖的数据发生了变化，才会重新计算

(2)不支持异步，当Computed中有异步操作时，无法监听数据的变化

(3) computed的值 会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data声明过，或者父组件传递过来的props中的数据进行计算的。

(4) 如果一个属性是由其他属性计算而来的，这个属性依赖其他的属性，一 般会使用computed

(5)如果computed属性的属性值是函数，那么默认使用get方法，函数的返回值就是属性的属性值;在computed中， 属性有一个get方法和一个set方法，当数据发生变化时，会调用set方法。

Watch：

(1)它不支持缓存，数据变化时，它就会触发相应的操作

(2)支持异步监听

(3)监听的函数接收两个参数，第一个参数是最新的值，第二个是变化之前的值

(4)当一个属性发生变化时,就需要执行相应的操作

(5)监听数据必须是data中声明的或者父组件传递过来的props中的数据，当发生变化时，会触发其他操作，函数有两个的参数:

immediate:组件加载立即触发回调函数

deep:深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象发生变化。需要注意的是，deep无法监听到数组和对象内部的变化。当想要执行异步或者昂贵的操作以响应不断的变化时，就需要使用watch。

总结：

(1) computed 计算属性:依赖其它属性值，并且computed的值有缓存，只有它依赖的属性值发生改变，下一次获取computed的值时才会重新计算computed的值。

(2) watch 侦听器:更多的是观察的作用，无缓存性，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。

运用场景:

(1)当需要进行数值计算并且依赖于其它数据时，应该使用computed, 因为可以利用computed的缓存特性，避免每次获取值时都要重新计算。

(2)当需要在数据变化时执行异步或开销较大的操作时，应该使用watch,使用watch选项允许执行异步操作(访问一个API),限制执行该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

三、vue中一个重要关系

xxxxxxxxxxxxxxxxxxxxxxxxxxx===xxxxxxxxxxx

四、vue特点：

Vue是一 套用于构建用界面的渐进式 JavaSript框架

①采用组件化模式，提高代码复用率且让代码好维护。

②声明式编码，让编码人员无需直接操作DOM。提高开发效率。
③使用虚拟DOM，+优秀的Diff算法；尽量复用DOM节点。