关于大前端的笔记（7）Vue3基础一

关于Vue3的数据驱动：

关于Vue3的组件化：

Vue3和Vue2的不同：

a. 更优化的双向绑定机制

Vue 2采用Object.defineProperty实现双向绑定，这个属性本身就存在一些不足的地方：（1）Object.defineProperty无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值时不能实时响应。为了解决这个问题，Vue 2使用几种方法来监听数组，如push（）、pop（）、shift（）、unshift（）、splice（）、sort（）、reverse（）；由于只针对以上方法进行了hack处理，所以其他数组的属性无法检测到，还是具有一定的局限性。（2）Object.defineProperty只能劫持对象的属性，因此需要对每个对象的每个属性进行遍历。在Vue 2.x里，通过递归＋遍历data对象实现对数据的监控，如果属性值也是对象，则需要深度遍历，显然如果能劫持一个完整的对象才是更好的选择，新增的属性还是通过set（）方法来添加监听，有一定的局限性。

Vue 3采用ES6的Proxy代替ES5的Object.defineProperty，Proxy有以下优点：（1）可以劫持整个对象，并返回一个新的对象。（2）Proxy支持13种劫持操作，对象劫持操作更加方便。

b. Vue 3使用TypeScript语言编写，TypeScript语言除了补充了很多面向对象的语言特性外，还提供了TypeScript编译器，可以很好地帮助开发者进行语法检查，避免了JavaScript语言只有在代码运行时才能发现错误。另外，目前最流行的Visual Code对TypeScript进行深度支持，有利于源码的检查和编译测试。

c. 快速diff算法。Vue 3借鉴和扩展了ivi和inferno框架中的快速Diff算法，该算法的性能优于Vue 2所采用的双端Diff算法，Vue 3.x的Diff算法通过和最长升序子序列的对比，将节点移动操作最小化，大大提升了效率。

d. composition API。Composition API是Vue 3中新增的一个功能，它的灵感来自于React Hook，可以提高代码逻辑的可复用性，从而实现与模板的无关性；同时使代码的可压缩性更强。另外，把Reactivity模块独立开来，意味着Vue 3的响应式模块可以与其他框架相组合。

e. Custom Render API。自定义渲染器，实现用DOM的方式进行WebGL编程。

f. 不再限制template只有一个根节点。render（）函数也可以返回数组了，有点像React.Fragments。