vue3响应式

vue3实现响应式的方法有两种:

第一种运用组合式API中的reactive直接构建响应式             ，组合式API的出现让我们可以直接用setup函数来处理之前的大部分逻辑 
 
  
 
  
 
  
 
  
 
  
 
  
，同时也避免了this的使用











，像data
  
  
  
  
  
  
 ，watch 
  
  
  
  
  
 ，computed 


 


 


 


 


 


 
，生命周期函数都声明在setup函数中
 
 
 
 
 
 
，这样就像react-hooks一样提升代码的复用率  
   
   
   
   
   
  ，逻辑性更强             。

第二种就是使用传统的 data(){ return{} } 的形式 

 

 

 

 

 

 
，vue3并没有放弃对vue2写法的支持

 

 

 

 

 

 
，而是对vue2的写法完全兼容 
 
  
 
  
 
  
 
  
 
  
 
  
。

响应式基础API

首先             ，让我们来看看vue3为响应式提供的一些基础API.

reactive

reactive用于将数据变成响应式数据











。调用reactive后返回的对象是响应式副本而非原始对象
  
  
  
  
  
  
 。其原理就是将传入的数据包装成一个Proxy对象 
  
  
  
  
  
 。

import { reactive, watchEffect } from vue; const data = { count: 0 }; const obj = reactive(data); data === obj // false watchEffect(() => { // 用于响应性追踪 console.log(obj.count); }); setTimeout(() => { obj.count++; }, 2000);

响应式转换是“深层             ”的——它影响所有嵌套 property 


 


 


 


 


 


 
。在基于 ES2015 Proxy 的实现中 
 

 
 

 
 

 
 

 
 

 
 

 
，返回的 proxy 是不等于原始对象的
 
 
 
 
 
 
。建议只使用响应式 proxy












，避免依赖原始对象  
   
   
   
   
   
  。

reactive用于复杂数据类型                   ，比如对象和数组等 
 
 
 
 
 
 
 
 
 
 
 
 
，当传入基础数据类型时


















，默认情况下修改数据,界面不会自动更新,如果想更新,可以通过重新赋值的方式 

 

 

 

 

 

 
。

readonly

接受一个对象 (响应式或纯对象) 或 ref 并返回原始对象的只读代理

 

 

 

 

 

 
。只读代理是深层的：任何被访问的嵌套 property 也是只读的             ，不能改变值 
 
  
 
  
 
  
 
  
 
  
 
  
，否则是报错             。

import { reactive, watchEffect, readonly } from vue; const data = { count: 0 }; const obj = reactive(data); const copy = readonly(obj); watchEffect(() => { // 用于响应性追踪 console.log(obj.count) }); setTimeout(() => { obj.count++; copy.count++; }, 2000);

isProxy

检查对象是否是由 reactive 或 readonly 创建的 proxy 
 

 
 

 
 

 
 

 
 

 
 

 
。

import { reactive, readonly, isProxy } from vue; const data = { count: 0 }; const obj = reactive(data); const copy = readonly(obj); console.log(isProxy(obj)); // true console.log(isProxy(copy)); // true console.log(isProxy(data)); // false

isReactive

检查对象是否是由 reactive 创建的响应式代理












。如果该代理是 readonly 创建的











，但包裹了由 reactive 创建的另一个代理
  
  
  
  
  
  
 ，它也会返回 true                   。

import { reactive, readonly, isReactive } from vue; const data = { count: 0 }; const obj = reactive(data); const copy = readonly(obj); const immute = readonly(data); console.log(isReactive(obj)); // true console.log(isReactive(copy)); // true console.log(isReactive(data)); // false console.log(isReactive(immute)) // false

isReadonly

检查对象是否是由 readonly 创建的只读代理 
 
 
 
 
 
 
 
 
 
 
 
 
。

import { reactive, readonly, isReadonly } from vue; const data = { count: 0 }; const obj = reactive(data); const copy = readonly(obj); const immute = readonly(data); console.log(isReadonly(obj)); // false console.log(isReadonly(copy)); // true console.log(isReadonly(data)); // false console.log(isReadonly(immute)) // true

toRaw

返回 reactive 或 readonly 代理的原始对象


















。这是一个“逃生舱 
 
  
 
  
 
  
 
  
 
  
 
  
” 
  
  
  
  
  
 ，可用于临时读取数据而无需承担代理访问/跟踪的开销 


 


 


 


 


 


 
，也可用于写入数据而避免触发更改             。不建议保留对原始对象的持久引用 
 
  
 
  
 
  
 
  
 
  
 
  
。请谨慎使用











。

import { reactive, readonly, toRaw } from vue; const data = { count: 0 }; const obj = reactive(data); const immute = readonly(data); console.log(toRaw(obj) === data); // true console.log(toRaw(immute) === data); // true

markRaw

标记一个对象
 
 
 
 
 
 
，使其永远不会转换为 proxy
  
  
  
  
  
  
 。返回对象本身 
  
  
  
  
  
 。

import { reactive, readonly, isReactive, markRaw } from vue; const data = markRaw({ count: 0 }); const obj = reactive(data); const immute = readonly(data); console.log(isReactive(obj)); // false console.log(obj === data); // true console.log(immute === data); // true // 即使嵌套在其他响应式队中也是非响应式的 const wrap = reactive({data}); console.log(isReactive(wrap.data)); // false

但是如果对标记对象内的属性进行响应化  
   
   
   
   
   
  ，是可以的 


 


 


 


 


 


 
。

const count = reactive({ // data被标记 

 

 

 

 

 

 
，data.count未被标记 count: data.count }) console.log(isReactive(count));

shallowReactive

创建一个响应式代理

 

 

 

 

 

 
，它跟踪其自身 property 的响应性             ，但不执行嵌套对象的深层响应式转换
 
 
 
 
 
 
。

import { shallowReactive, isReactive, watchEffect } from vue; const data = { count: 0, nested: { count: 0 } }; const obj = shallowReactive(data); watchEffect(() => { // 追踪obj.count的变化 console.log(obj.count); }); watchEffect(() => { // 追踪obj.nested.count的变化 console.log(obj.nested.count); }); obj.count++; obj.nested.count++; console.log(data.count); // 0 console.log(data.nested.count); // 1 console.log(isReactive(obj.nested)); // false

shallowReadonly

创建一个 proxy 
 

 
 

 
 

 
 

 
 

 
 

 
，使其自身的 property 为只读












，但不执行嵌套对象的深度只读转换  
   
   
   
   
   
  。

import { shallowReadonly, isReadonly } from vue; const data = { count: 0, nested: { count: 0 } }; const obj = shallowReadonly(data); // 报错 obj.count++; obj.nested.count++; console.log(isReadonly(obj.nested)); // false

ref

接受一个内部值并返回一个响应式且可变的 ref 对象 

 

 

 

 

 

 
。ref 对象仅有一个 .value值                   ，指向该内部值

 

 

 

 

 

 
。跟reactive类似 
 
 
 
 
 
 
 
 
 
 
 
 
，也是将数据变成响应式             。

import { ref, watchEffect } from vue; const count = ref(0); const obj = ref({ count: 0 }) console.log(obj) watchEffect(() => { console.log(count.value); }) watchEffect(() => { console.log(obj.value.count: , obj.value.count); }) count.value++; obj.value.count++;

ref和reactive的区别

ref是把值类型添加一层包装


















，使其变成响应式的引用类型的值 
 

 
 

 
 

 
 

 
 

 
 

 
。ref(0) --> reactive( { value:0 }) reactive 则是引用类型的值变成响应式的值












。

两者的区别只是在于是否需要添加一层引用包装             ，对于对象而言 
 
  
 
  
 
  
 
  
 
  
 
  
，添加一层包装后会被reactive处理为深层的响应式对象











，在调用unref后就能看到其实对象是一个Reactive对象                   。

像上面的例子
  
  
  
  
  
  
 ，使用ref同样可以将对象响应化 
  
  
  
  
  
 ，不过访问的时候需要调用value.去访问内部属性 
 
 
 
 
 
 
 
 
 
 
 
 
。所以对于对象而言 


 


 


 


 


 


 
，最好使用reative去响应化处理


















。

unref

如果参数是一个 ref
 
 
 
 
 
 
，则返回内部值  
   
   
   
   
   
  ，否则返回参数本身             。这是 val = isRef(val) ? val.value : val 的语法糖函数 
 
  
 
  
 
  
 
  
 
  
 
  
。

import { ref, unref } from vue; const count = ref(0); const obj = ref({ count: 0 }) console.log(unref(count)); // 0 console.log(unref(obj)) // Reactive对象

toRef

可以用来为源响应式对象上的某个属性新创建一个 ref











。然后 

 

 

 

 

 

 
，ref 可以被传递

 

 

 

 

 

 
，它会保持对其源属性的响应式连接
  
  
  
  
  
  
 。

import { reactive, toRef } from vue; const obj = reactive({ count: 0 }) const countRef = toRef(obj, count); countRef.value++; console.log(obj.count) // 1 obj.count++; console.log(countRef) // 2

toRefs

将响应式对象转换为普通对象             ，其中结果对象的每个属性都是指向原始对象相应属性的 ref 
  
  
  
  
  
 。

import { reactive, toRefs } from vue; const obj = reactive({ count: 0 }) const countRef = toRefs(obj); countRef.value++; console.log(obj.count) // 1 obj.count++; console.log(countRef.count.value) // 2

toRefs 只会为源对象中包含的属性生成 ref 


 


 


 


 


 


 
。如果要为特定的属性创建 ref 
 

 
 

 
 

 
 

 
 

 
 

 
，则应当使用 toRef
 
 
 
 
 
 
。

isRef

检查值是否为一个 ref 对象  
   
   
   
   
   
  。

import { isRef, ref } from vue; const count = ref(0); console.log(isRef(count)); // true

customRef

创建一个自定义的 ref












，并对其依赖项跟踪和更新触发进行显式控制 

 

 

 

 

 

 
。它需要一个工厂函数                   ，该函数接收 track 和 trigger 函数作为参数 
 
 
 
 
 
 
 
 
 
 
 
 
，并且应该返回一个带有 get 和 set 的对象

 

 

 

 

 

 
。

使用自定义 ref 通过 v-model 实现 debounce 的示例：

<input v-model="text" /> function useDebouncedRef(value, delay = 200) { let timeout return customRef((track, trigger) => { return { get() { track() return value }, set(newValue) { clearTimeout(timeout) timeout = setTimeout(() => { value = newValue trigger() }, delay) } } }) } export default { setup() { return { text: useDebouncedRef(hello) } } }

shallowRef

创建一个跟踪自身 .value 变化的 ref


















，但不会使其值也变成响应式的             。

const obj = shallowRef({}) // 改变 ref 的值是响应式的 obj.value = {} // 但是这个值不会被转换 
 

 
 

 
 

 
 

 
 

 
 

 
。 isReactive(obj.value) // false

triggerRef

手动执行与 shallowRef 关联的任何作用












。

const shallow = shallowRef({ greet: Hello, world }) // 第一次运行时记录一次 "Hello, world" watchEffect(() => { console.log(shallow.value.greet) }) // 这不会触发作用 (effect)             ，因为 ref 是浅层的 shallow.value.greet = Hello, universe // 触发副作用 "Hello, universe" triggerRef(shallow)

computed

接受一个 getter 函数 
 
  
 
  
 
  
 
  
 
  
 
  
，并根据 getter 的返回值返回一个不可变的响应式 ref 对象                   。

const count = ref(1) const plusOne = computed(() => count.value + 1) console.log(plusOne.value) // 2 plusOne.value++ // 错误

或者











，接受一个具有 get 和 set 函数的对象
  
  
  
  
  
  
 ，用来创建可写的 ref 对象 
 
 
 
 
 
 
 
 
 
 
 
 
。

const count = ref(1) const plusOne = computed({ get: () => count.value + 1, set: val => { count.value = val - 1 } }) plusOne.value = 1 console.log(count.value) // 0

watch

vue3中组合式api watch 与vue2中选项式的watch完全等效


















。watch 需要监听特定的数据源 
  
  
  
  
  
 ，并在单独的回调函数中执行副作用             。默认情况下 


 


 


 


 


 


 
，它也是惰性的——即回调仅在监听源发生变化时被调用 
 
  
 
  
 
  
 
  
 
  
 
  
。

与 watchEffect 相比
 
 
 
 
 
 
，watch 允许我们：

惰性地执行副作用； 更具体地说明应触发监听器重新运行的状态； 访问被监听状态的先前值和当前值











。 监听单一源

源数据可以是一个reactive  
   
   
   
   
   
  ，也可以直接是一个 ref

语法 watch( name , callback, options ) ； name: 需要监听的属性或者返回值的getter函数 callback: 属性改变后执行的方法 

 

 

 

 

 

 
，接受两个参数 newVal: 新值 oldVal: 旧值 options: 配置项

 

 

 

 

 

 
，可配置如下 deep: Boolean, 是否深度监听 immediate: Boolean             ，是否立即执行 // 侦听reactive const state = reactive({ count: 0, value: 1 }) // 只监听对象中的count watch( // 使用getter函数保证只监听了state中的count () => state.count, (count, prevCount) => { /* ... */ } ) // 侦听state中所有属性 watch(state, (newVal, oldVal) => { // ... }) // 直接侦听一个 ref const count = ref(0) watch(count, (count, prevCount) => { /* ... */ }) 监听多个源

使用数组来同时侦听多个源数据 
 

 
 

 
 

 
 

 
 

 
 

 
，当任一源数据发生改变都会触发watch

const state = reactive({ count: 0, value: 1 }); const count = ref(0) watch([state, count], ([newState, newCount], [oldState, oldCount]) => { console.log(newState); console.log(newCount); }) state.count++; count.value++; 深度监听

在watch的第三个参数中传入deep: true

const state = reactive({ count: 0, value: { status: false } }); watch(() => state, (newVal, oldVal) => { console.log(不会触发) }) watch(() => state, (newVal, oldVal) => { console.log(触发深度监听) }, { deep: true }) state.value.status = true;

由于getter方法只返回state












，对没有对内部的对象进行监听                   ，因此内部对象的属性发生改变不会触发watch
  
  
  
  
  
  
 。

当没有使用getter方法而是传入state这个reactive数据 
 
 
 
 
 
 
 
 
 
 
 
 
，则不需要设置deep: true都会进行深度监听 
  
  
  
  
  
 。

立即执行

在watch的第三个参数中传入immediate: true


















，当传入数据就会执行一次 


 


 


 


 


 


 
。

watchEffect

立即执行传入的一个函数             ，响应式追踪其依赖 
 
  
 
  
 
  
 
  
 
  
 
  
，在其依赖变更时重新运行该函数
 
 
 
 
 
 
。

它会监听引用数据类型的所有属性











，不需要具体到某个属性
  
  
  
  
  
  
 ，一旦运行就会立即监听 
  
  
  
  
  
 ，组件卸载的时候会停止监听

const count = ref(0) watchEffect(() => console.log(count.value)) // -> logs 0 setTimeout(() => { count.value++ // -> logs 1 }, 100) 停止监听

当 watchEffect 在组件的 setup() 函数或生命周期钩子被调用时 


 


 


 


 


 


 
，侦听器会被链接到该组件的生命周期
 
 
 
 
 
 
，并在组件卸载时自动停止  
   
   
   
   
   
  。

在一些情况下  
   
   
   
   
   
  ，也可以显式调用返回值以停止侦听

const stop = watchEffect(() => { /* ... */ }) // later stop() 清除副作用

有时副作用函数会执行一些异步的副作用 

 

 

 

 

 

 
，这些响应需要在其失效时清除 (即完成之前状态已改变了)  

 

 

 

 

 

 
。所以侦听副作用传入的函数可以接收一个 onInvalidate 函数作入参

 

 

 

 

 

 
，用来注册清理失效时的回调

 

 

 

 

 

 
。当以下情况发生时             ，这个失效回调会被触发：

副作用即将重新执行时 侦听器被停止 (如果在 setup() 或生命周期钩子函数中使用了 watchEffect 
 

 
 

 
 

 
 

 
 

 
 

 
，则在组件卸载时) watchEffect(onInvalidate => { const token = performAsyncOperation(id.value) onInvalidate(() => { // id has changed or watcher is stopped. // invalidate previously pending async operation token.cancel() }) })