使用
import {unref,toRef,toRefs,isRef,isProxy,isRefs,isReactive,isReadonly} from 'vue'
(1)unref
判断是否是ref对象,是返回ref对象.value值,不是返回参数本身
const xx=unref(x)
(2)toRef
为一个reactive对象的属性创建一个ref,并返回该ref,即可通过返回值和reactive对象操作属性
const x = reactive({xx:xxx})
const y=toRef(x,xx);
y.value和x.xx都可以操作xx属性
(3)toRefs
把一个响应式对象转换成普通对象,该普通对象的每个属性都是一个ref对象
const x = reactive({xx:xxx})
const y=toRefs(x);
y.xx.value和x.xx都可操控属性
(4)isRef
检查一个参数是否为一个 ref 对象。
(5)isProxy
检查一个对象是否是由reactive或者readonly方法创建的代理。
(6)isReactive
检查一个对象是否是由reactive创建的响应式代理
(7)isReadonly
检查一个对象是否是由readonly创建的只读代理。
(8)markRaw
显式标记一个对象为“永远不会转为响应式代理”,函数返回这个对象本身。
即使在响应式对象中作属性,也依然不是响应式的
const foo = markRaw({})
console.log(isReactive(reactive(foo))) false
const bar = reactive({ foo })
console.log(isReactive(bar.foo)) false
若
const obj3=markRaw({name:{}}); 单独的name是不可代理的
const obj4=reactive({obj3:obj3.name}) obj4.obj3是可代理的
即是浅层转换,即当markRaw对象的属性有对象时,放到其他对象中,是可代理的
(9)shallowReactive
为对象第一层属性创建浅层响应式代理,不会深层代理(如第一层属性是个对象)
const x=shallowReactive({x:'xx',xx:{xxx:'xxx'}})
x.x是可代理的
x.xx是不可代理的
x.xx.xxx是非响应式
(10)shallowReadonly
为对象第一层属性创建浅层只读响应式代理,不会深层代理(如第一层属性是个对象)
const x=shallowReactive({x:'xx',xx:{xxx:'xxx'}})
x.x是只读的
x.xx不是只读的
(11)shallowRef
创建一个 ref,将会追踪它的.value更改操作,但是并不会对变更后的.value做响应式代理转换(即变更不会调用 reactive).
const foo = shallowRef({}) 会追踪foo的变更
foo.value = {}
上面新赋的这个对象并不会变为响应式对象
isReactive(foo.value) false
(12)toRaw
返回由reactive或readonly方法转换成响应式代理的普通对象,是原始对象的引用
const foo = {}
const reactiveFoo = reactive(foo)
console.log(toRaw(reactiveFoo) === foo) true
代码示例:
<template>
<div>
<img src="./logo.png">
<h1>Hello Vue 3!</h1>
{{name}}{{obj.sex}}{{data}}
<button @click="inc" ref='btn'>Clicked {{ count }} times.</button>
<ul>
<li v-for='(item,index) in 3' :key=index :ref="el=>{divs[index]=el}">
{{item}}
</li>
</ul>
</div>
</template>
<script>
import { ref,reactive,computed,readonly,watchEffect,watch,onMounted, onUpdated, onUnmounted,onRenderTracked,onRenderTriggered,
inject,provide,render, onBeforeUpdate,unref,toRef,toRefs,isRef,isProxy,isRefs,isReactive,isReadonly
} from 'vue'
const ThemeSymbol = Symbol()
export default {
setup() {
let count = ref(0)
let count2=ref(2);
let normal='123'
let name = ref('jeff')
const obj=reactive({sex:'male'})
const robj=readonly(obj);
const divs = ref([])
let timer;
const btn =ref(null);
console.log(unref(normal));
const inc = () => {
count.value++;
name.value='jak'
}
onMounted(()=>{
})
return {
count,
inc,
name, //在setup返回对象中自动解套
obj,
btn,
divs
}
}
}
</script>
<style scoped>
img {
width: 200px;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
}
</style>