vue3与react、 react hooks

一、Vue3新特性：setup、ref、reactive、computed、watch、watchEffect函数、生命周期钩子、自界说hooks函数、toRef和toRefs、shallowReactive 与 shallowRef、readonly 与 shallowReadonly、toRaw 与 markRaw、customRef、provide 与 inject、Fragment、Teleport、Suspense、data选项应始终被声明为一个函数

2、setup是全部composition  API(组合式api)展示的舞台， 返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用，setUp(props, contex)担当两个参数，props：值为对象，包罗：组件外部通报过来，且组件内部声明吸收了的属性（实在就是vue2.0的props功能），context：上下文对象（其中可以获取到1、attrs组件外部通报过来，但没有在props设置中声明的属性。2、slots：插槽内容3、emit：分发自界说事故的函数,而且以后在setup中不能写this.$emit,要写context.emit）

3、ref一样平常用来界说一个根本范例的相应式数据， reactive界说一个相应式源对象，吸收一个平常对象然后返回该平常对象的相应式署理器对象，相应式转换是“深层的”：会影响对象内部全部嵌套的属性，内部基于 ES6 的 Proxy 实现，通过署理对象使用源对象内部数据都是相应式的；watch默认是惰性的，watchEffect默认立刻执行；watch可以获取到当前值和之前值，watchEffect只能获取当前值；watch可以通报多个函数作为参数，watchEffect只需要通报一个回调函数

焦点:
对象: 通过defineProperty对对象的已有属性值的读取和修改举行挟制(监督/拦截)
数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的挟制

焦点:
通过Proxy(署理):拦截对data恣意属性的恣意(13种)使用, 包罗属性值的读写, 属性的添加, 属性的删除等…
通过 Reflect(反射): 动态对被署理对象的相应属性举行特定的使用

beforeCreate -> 使用 setup()
created -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured
1.vue3中已经没有destroyed 和beforeDestroy 了
2.vue3也可以用vue2的生命周期,vue3生命周期比vue2快

//界说的hooks

import {reactive,onMounted,onBeforeUnmount} from 'vue'
export default function(){
    let point=reactive(
        {
            x:0,
            y:0
        }
    )
    function sponk(event){
        console.log(point);
        point.x=event.pageX;
        point.y=event.pageY;
        console.log(event);
    }
    onMounted(()=>{
        console.log('onMounted');
        document.getElementById('HelloWorld').addEventListener('click',sponk)
    })
    onBeforeUnmount(()=>{
        console.log('onBeforeUnmount');
        document.getElementById('HelloWorld').removeEventListener('click',sponk)
    })
    return point;
}

Performance：性能比vue2.x块1.2～2倍
Tree shaking support：支持按需编译，体积更小
Composition API：组合API，雷同React Hooks
Custom Renderer API：袒露了自界说渲染API
Fragment，Teleport（Protal），Suspense：新增三个组件
Better TypeScript support：更好的支持TS

Vue3.0在性能方面比Vue2.x快了1.2～2倍。
重写假造DOM的实现
运行时编译
静态提升与事故侦听器缓存
SSR 速率进步

Vue3.x中的焦点API都支持tree-shaking，这些API都是通过包引入的方式而不是直接在实例化时就注入，只会对使用到的功能或特性举行打包（按需打包），这意味着更多的功能和更小的体积。

Vue2.x中，我们通常采取mixin来复用逻辑代码，使用起来固然方便，但也存在一些题目：代码泉源不清晰、方法属性大概出现辩说。因此，Vue3.x引入了Composition API（组合API），使用纯函数分割复用代码。和React Hooks的概念相似。

在誊写Vue2.x时，由于组件必须是一个根结点，许多时间会添加一些没故意义的节点用于包裹。Fragment组件就是用于办理这个题目标（这和React 中的Fragment组件是一样的）。

Teleport实在就是React中的Portal。Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的精良的方案。
一个 portal 的典范用例是当父组件有 overflow: hidden 或 z-index 样式时，但你需要子组件能够在视觉上“跳出”其容器。比方，对话框、悬浮卡以及提示框。

同样的，这和React中的Supense是一样的。
Suspense 让你的组件在渲染之进步行“期待”，并在期待时表现 fallback 的内容。

Vue2 中的假造dom 是举行全量对比
Vue3 新增静态标记，这和react的fiber雷同，都是打tag

Vue2 中无论元素是否加入更新，每次都会重新创建，然后在渲染
Vue3 中对于不加入更新的元素，会做静态提升，只被创建一次，在渲染时直接复用即可

默认情况下默认情况下onClick会被视为动态绑定，所以每次都会去追踪它的厘革，但是由于是同一个函数，所以没有追踪厘革，直接缓存起来复用即可

当有大量静态的内容的时间，这些内容会被当作纯字符串推进一个buffer内里，纵然存在动态的绑定，会通过模版插值嵌入进去，如许会比通过假造dom来渲染的快上许多许多
当静态内容大到肯定量级的时间，会用_createStaticVNode方法在客户端去天生一个static node。这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染。

1.浏览器性能提升
　　起首，随着ES6的发展已及广泛使用，浏览器对这些新的特性徐徐增长，性能不绝优化，这就给vue3优化提供了一个时机，通过重写来优化提升vue的性能。
2、底层实现方法
在框架计划上，vue2.0 是采取Object.defineProperty来实现双向绑定原理，这个属性自己就存在一些不足的地方，好比：
1.Object.defineProperty无法监控到数组下标的厘革，导致直接通过数组的下标给数组设置值，不能及时相应。 为了办理这个题目，经过vue内部处理处罚后可以使用以下几种方法来监听数组，push()，pop()，shift()，unshift()，splice()，sort()，reverse()；由于只针对了以上八种方法举行了hack处理处罚,所以其他数组的属性也是检测不到的，还是具有肯定的范围性。
　　2.Object.defineProperty只能挟制对象的属性,因此我们需要对每个对象的每个属性举行遍历。Vue 2.x里，是通过 递归 + 遍历 data 对象来实现对数据的监控的，假如属性值也是对象那么需要深度遍历,显然假如能挟制一个完备的对象是才是更好的选择，新增的属性还行通过set方法来添加监听，有肯定的范围性。
　　vue3紧张采取的Proxy特性，有以下优点：
　　1.可以挟制整个对象，并返回一个新的对象
　　2.有13种挟制使用，但同时Proxy作为ES6的新特性，有肯定的兼容题目，最紧张的是这个属性无法用polyfill来兼容，这个需要在vue3中需要办理的题目。

实现和更新原理

React将每个节点转化为fiber对象,终极形成一个fiber树布局，来依次渲染。通过两个fiber的对比来实现更新。这里要说到几个diff算法，分别是tree diff,component diff和element diff。同时更新过程大概会被打断，让优先级更高的任务优先执行(比方浏览器渲染)
Tree diff
新旧两个DOM树，逐层对比的过程；当整个DOM树逐层对比完毕，则全部需要被更新的元素一定能被找到；
Component diff
在举行Tree Diff的时间，每一层中，组件级别的对比。假如对比前后，组件的范例雷同，则暂时以为此组件不需要被更新；假如对比前后，组件范例差别，则需要移除旧组件，创建新组件，并追加到页面上；
Element diff
在举行组件对比的时间，假如两个组件范例雷同，则需要举行元素级别的对比，叫做element diff；

数据驱动视图
组件化
都使用Virtual DOM

vue的紧张特点：机动易用的渐进式框架，举行数据拦截/署理，它对侦测数据的厘革更敏感、更正确。
Reactt推许函数式编程（纯组件），数据不可变以及单向数据流,固然需要双向的地方也可以手动实现， 好比借助onChange和setState来实现。
由于两者焦点思想的差别，所以导致Vue和React在后续计划产生了许多的差异。

Vue 保举的做法是 template 的单文件组件格式(简单易懂，从传统前端转过来易于明白),即 html,css,JS 写在同一个文件(vue也支持JSX写法)
React保举的做法是JSX + inline style, 也就是把 HTML 和 CSS 全都写进 JavaScript 中,即 all in js
这个差异肯定程度上也是由于二者焦点思想差别而导致的。

Vue依赖网络，主动优化，数据可变。Vue递归监听data的全部属性,直接修改。当数据改变时，主动找到引用组件重新渲染。
React基于状态机，手动优化，数据不可变，需要setState驱动新的state更换老的state。当数据改变时，以组件为根目次，默认全部重新渲染, 所以 React 中会需要 shouldComponentUpdate 这个生命周期函数方法来举行控制