createReactiveObject接收五个参数:target被代理的对象,isReadonly是不是只读的,baseHandlersproxy的捕获器,collectionHandlers针对集合的proxy捕获器,proxyMap一个用于缓存proxy的WeakMap对象 如果target不是Object,则进行提示,并返回target。 if (!isObject(target)) { if (__DEV__) { console.warn(`value cannot b...
exportfunctionreactive(target:object){// 如果target是个只读proxy,直接returnif(isReadonly(target)){returntarget}returncreateReactiveObject(target,false,mutableHandlers,mutableCollectionHandlers,reactiveMap)} reactive首先判断target是不是只读的proxy,如果是的话,直接返回target;否则调用一个createReactiveObject方法。
vue3的setup()替换了beforeCreate , created ; 类似于初始化功能。 △ ref响应式数据,在函数读取时需要.value获取,dom内不需要添加.value 可自动解构;组件return时 将reactive的对象 toRefs,可以使代码更简洁,又不丢失代码响应式。 reactive 内部可以使用计算属性等各种方法,他只是把数据实现响应式而已。 reacive 后...
Composition API 又名组合式API,我们要知道 我们常用的vue2使用的是OptionAPI,简单的说就是我们熟悉的 data, computed , method等等,但是在vue3中 我们并不建议使用OptionAPI。 在Vue2中 我们一个功能得分不同的许多地方 比如数据放在data中 方法放在methods中 分开的特别散乱 一两个功能还好 但是页面可能功能很多 ...
其实我们看 Vue3 的源码会发现,很多入口方法都变得短小精简,不像 Vue2 里的一些 exposed function 那样写的很长,这两个核心方法也一样,逻辑很简单,主要是进行一些原始数据检查和转换,核心实现逻辑都是放在 createReactiveObject 里的 下面继续看下核心实现方法 createReactiveObject: // 创建响应式对象 function crea...
Vue3新的api 1. composition api 1.1 data → ref / reactive ref和reactive使得我们主动去包装那些会修改的数据,不变的则将原始对象交给模板;在Vue2中,为了能在模板中使用一些数据,我们通常将那些不变的数据也放在data里面,而Vue默认会为这些数据做响应式,所以就有了Object.freeze()这种优化手段。而这个问题在...
<template><h2>Vue3 reactive deep API Base</h2><div>Object:{{reactiveDeepObj.user.name}}<span@click="setReactiveDeepObj">Update</span></div><div>Array:{{reactiveDeepArr}}<span@click="setReactiveDeepArr">Update</span></div></template> ...
reactiveArr[1] = 'Hello Chris1993'; } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 模版内容如下: <template> <h2>Vue3 reactive API Base</h2> <div> Object:{{reactiveObj.name}} <span@click="setReactiveObj">Update</span>
<script>import { h, ref, reactive } from 'vue'export default { setup() { const count = ref(0) const object = reactive({ foo: 'bar' }) return () => h('div', [ h('p', { style: 'color: red' }, count.value), h('p', object.foo) ]) }}</scri...
reactive首先判断target是不是只读的proxy,如果是的话,直接返回target;否则调用一个createReactiveObject方法。