使用ref声明String, Number, Boolean 为一个原始值使用reactive会返回一个警告,并且该值不会成为可响应式数据。 /* DOES NOT WORK AS EXPECTED */import { reactive } from "vue";const count = reactive(0); [Vue warn]: value cannot be made reactive 矛盾的是,另一种方式是可行的。例如,使用ref来声...
constobj =reactive({count:0,name:'hyh'})constcount =reactive(1)// value cannot be made reactive: 1 实现原理 reactive是基于Proxy实现的响应式。 constReactiveFlags= {SKIP='__v_skip',IS_REACTIVE='__v_isReactive',IS_READONLY='__v_isReadonly',RAW='__v_raw'}// 用于缓存代理过的对象con...
使用ref代替String,Number,Boolean 对于原始值使用响应式会导致警告,并且该值不会被设置为响应式: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 /* DOES NOT WORK AS EXPECTED */import{reactive}from"vue";constcount=reactive(0); [Vue warn]: value cannot be made reactive 事例:https://codesandbox...
key, value, receiver)// don't trigger if target is something up in the prototype chain of original// 如果目标对象是原始数据的原型链中的某个元素,则不会触发依赖收集if(target ===toRaw(receiver)) {if(!hadKey) {// 如果没有这个 key,那么就是新增了一个属性,触发 add 事件trigger(...
value cannot be made reactive: 0 而输出的值确实发生了变化,只不过这种变化并没有反馈到界面上,也就是说并没有实现双向数据绑定。当然,如果是ref的话,就不存在这样的问题。而如果要使用reactive,我们需要将参数从 基本类型 转化为 对象。 <template> ...
if (!isObject(target)) { if (__DEV__) { console.warn(`value cannot be made reactive: ${String(target)}`) } return target } 其次判断当前对象是否已经被代理且并不是只读的,那么本身就是一个代理对象,那么就没有必要再去进行代理了,直接将其当作返回值返回,避免重复代理。 if ( target[Reactive...
console.warn(`value cannot be made reactive: ${String(target)}`)} return target } 3.2 如果被代理过了直接返回 // 此时传递对象是代理后对象 // 如果被代理过直接返回 主要是【target[ReactiveFlags.IS_REACTIVE]】起了作用 if (target[ReactiveFlags.RAW] && !(isReadonly && target[ReactiveFlags.IS...
import{ reactive, ref }from"vue";importtype{Ref}from"vue";// 定义响应式数据constcount:Ref<number> =ref(0);functioncountClick() { count.value++;// 更新数据} AI代码助手复制代码 // 定义引用类型数据标注interfaceTypeForm{ name:string;
private _rawValue: T public dep?: Dep = undefined public readonly __v_isRef = true constructor(value: T, public readonly __v_isShallow: boolean) {//关键点在这里:__v_isShallow这个参数如果为false,则调用toReactive,而shallowRef方法中,该参数为true,则故能调用该方法处理传入得目标数据this._ra...
因为ES的Proxy API是为引用数据类型服务的,它无法为基本数据类型提供代理。如果强行代理,Vue会有提示:value cannot be made reactive: 30。 那么为什么Vue2的defineproperty并没有区分基本数据类型和引用数据类型呢? 因为defineproperty就是Object的静态方法,它只是为对象...