vue的设计原理
- 渐进式的JavaScript框架：vue的核心只关注视图层，容易上手，还便于与第三方库或既有项目整合
- 易用性：vue提供数据响应式、声明式模板语法和基于配置的组件系统等核心特性。这些使我们只需关注应用的核心业务即可。
- 灵活性：渐进式框架最大优点就是灵活性，如果应用足够小，我们可能仅需要vue核心特性即可完成功能；随着应用规模的不断扩大，我们才可能逐渐引入路由、状态管理、vue-cli等库和工具，不管是应用体积还是学习难度都是一个逐渐增加的平和曲线。
- 高效性：超快的虚拟DOM和diff算法使我们的应用拥有最佳的性能表现。追求高效的过程还在继续，vue3中引入Proxy对数据响应式改进以及编译器中对于静态内容编译的改进都会让vue更加高效。
vue的常见性能优化
- 路由懒加载
- keep-alive缓存页面
- 使用v-show复用DOM
- v-for遍历时避免同时使用v-if
- 长列表性能优化，
如果列表是纯粹的数据展示，不作任何改变，就不需要做响应化，
如果是大数据列表，可采用虚拟滚动，只渲染可见区域内容 - 事件的销毁，解绑全部指令及事件监听器
- 图片懒加载
- 第三方插件按需引入
v-model的实现原理
绑定响应数据，触发input事件并传递数据
修改computed计算属性的结果值
- 需要通过get/set写法
- 当前组件v-model绑定的值是computed来的，需要通过get/set写法
computed和watch的区别
对于computed
- 计算属性的结果会被缓存，只有依赖的数据发生变化才会重新计算
- 不支持异步，computed中有异步操作时，无法监听数据的变化
- computed的值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data声明过，或者父组件传递过来的props中的数据进行计算的。
- 如果一个属性是由其他属性计算而来的，这个属性依赖其他的属性，一般会使用computed
- 如果computed属性的属性值是函数，那么默认使用get方法，函数的返回值就是属性的属性值；在computed中，属性有一个get方法和一个set方法，当数据发生变化时，会调用set方法。
对于watch
- 它支持缓存，只要数据变化时，就会触发响应的操作
- 支持异步监听
- 监听的函数接收两个参数，第一个参数是最新的值，第二个是变化之前的值
- 当一个属性发生变化时，就需要执行相应的操作
- 监听数据必须是data中声明的或者父组件传递过来的props中的数据，当发生变化时，会触发其他操作，函数有两个的参数：
- immediate：组件加载立即触发回调函数
- deep：深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象发生变化。需要注意的是，deep无法监听到数组和对象内部的变化。
总结
- computed计算属性：computed的值有缓存，依赖其他属性值，只有它依赖的属性值发生变化，下一次获取computed的值时才会重新计算computed的值。
- watch监听器：更多的是观察作用，无缓存，类似于某些数据的监听回调，每当监听的数据发生变化时，都会执行回调进行后续操作。
运用场景
- 当需要进行数据计算，并且依赖于其他数据时，应使用computed，因为可以利用computed的缓存特性，避免每次获取值时都要重新计算。
- 当需要在数据变化时执行异步或开销较大的操作时，应该使用watch，使用watch选项允许执行异步操作，限制执行该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
