安博电竞

ref()

在vue3.0引入了composition API ,响学习 setup函数是其核心函数

在setup函数中，可以使用ref函数，用于创建一个响应式数据，当数据发生改变时，Vue会自动更新UI

例如：使用ref函数定义一个变量count

import { ref } from 'vue';

function useChangeCount() {

form

}

},

ref 和 reactive 定义响应式数据的区别

1. ref允许我们创建一个任意类型的响应式的ref对象，在使用时需要带上.value

2. 模板中使用ref对象时，假如ref位于顶层，就不需要使用value，它会自动解包

3. 但如果ref对象是作为一个属性声明于对象之中，在模板中进行运算时仍然要使用.value

4. 通常使用reactive()来创建一个响应式的对象或数组，这样的对象或数组状态都是默认深层响应式的，无论嵌套多深，都能跟踪到。

5. 但他也有局限性，就是应式原理只对 对象类型有效，对基本数据类型无效

6. 并且假如用一个新对象替换了原来的旧对象，那么原来的旧对象会失去响应性

两者区别：

1、ref多用来定义基本数据类型（也可以定义对象，内部会自动通过reactive转为代理对象），而 reactive只能用来定义对象数组类型

2 、响学习ref操作数据需要.value，reactive操作数据不需要.value

3、应式原理ref通过Object.defineProperty()的响学习get和set来实现响应式， reactive通过Proxy来实现响应式，并通过Reflect操作源对象内部的数据

toRaw()

reactive存值

let obj = { name: "aa", age: 18 };

let state = reactive(obj);

console.log(obl === state) false

state 和 obj的关系

state 和 obj是引用关系，state的本质是一个Proxy对象，在这个Proxy对象中引用了obj

toRaw()获取值

• 如果想通过toRaw拿到ref类型的原始数据（创建时传入的那个数据）

• 必须明确的告诉toRaw方法，要获取的是.value的值

• 因为经过Vue处理之后，.value中保存的才是当初创建时传入的那个原始数据

isRef,isReactive

• isRef: 检查一个值是否为一个 ref 对象

• isReactive: 检查一个对象是否是由 reactive 创建的响应式代理

• isReadonly: 检查一个对象是否是由 readonly 创建的只读代理

• isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

// isRef: 检查一个值是否为一个 ref 对象

console.log(isRef(ref({}))); // true

// isReactive: 检查一个对象是否是由 reactive 创建的响应式代理

console.log(isReactive(reactive({}))); // true

// isReadonly: 检查一个对象是否是由 readonly 创建的只读代理

console.log(isReadonly(readonly({}))); // true

// isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

console.log(isProxy(readonly({}))); // true

console.log(isProxy(reactive({}))); // true

chatgpt免费软件,chatgpt api 免费接口,chatgpt 聊天机器人教程,chatgpt 指令大全,chatgpt app

ref ，reactive toRaw

CHATGPT与百度：人工智能的应式原理未来之光

CHATGPT是人工智能领域的未来之光 ，而百度则在这个未来中发挥着重要作用 。响学习百度将持续推动CHATGPT的应式原理创新与发展 ，为人们带来更多智能化的响学习惊喜。

应式原理