【vue3】ref全家桶 |
您所在的位置：网站首页 › 小米平板安装google全家桶 › 【vue3】ref全家桶 |
【vue3】ref全家桶
|
ref全家桶
ref 接受一个内部值并返回一个响应式且可变的ref对象。ref对象仅有一个.value property，指向该内部值。 在vue3中，定义的常量不是响应式的，修改值的时候页面不会发生变化。这时候我们需要调用ref来把它变成响应式的，修改ref对象值的时候，必须是修改value指向内部值，如下代码所示： //引入ref import {ref} from "vue"; let name = "daxue"; //没有初始值的时候可以定义为 let sex = ref(0) let sex = ref("man"); const clickTap = ()=>{ //页面不会更新 name = "ding~daxue" //页面sex参数更新 sex.value = "woman" } //ref获取dom对象 //定义的变量名一定要跟div上ref属性值一模一样 const dom = ref(); unref如果参数是一个ref，则返回内部值，否则返回参数本身。这是 val = isRef(val)?val.value:val 的语法糖函数。 toRef可以用来为源响应式对象上的某个property新创建一个ref。然后，ref可以被传递，他会保持对其源property的响应式连接。 将对象某个属性变成可响应式的，并且是双向的。如下代码： const user = { name:"daxue", sex:"woman" } const name = toRef(user,'name') const clickTap=()=>{ name = "ding~daxue" } toRefs将响应式对象转换为普通对象，其中结果对象的每个property都是指向原始对象相应property的ref 这一属性相当于上面toRef的集合，是给对象里面每个属性都生成了ref。 const state = reactive({ foo: 1, bar: 2 }) const stateAsRefs = toRefs(state) /* stateAsRefs 的类型: { foo: Ref, bar: Ref } */ // ref 和原始 property 已经“链接”起来了 state.foo++ console.log(stateAsRefs.foo.value) // 2 stateAsRefs.foo.value++ console.log(state.foo) // 3 isRef检查值是否为一个ref对象 customRef创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并且应该返回一个带有 get 和 set 的对象。 使用customRef通过v-model实现debounce的示例： 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，但不会使其值也变成响应式的。 //页面 {{user.name}} let user = shallowRef({ name: "daxue", age: 8 }) const change = () => { user.value.name = "xiaoxue" }上面这种情况页面不会更新,但是打印值发现其实value已经更新.要想页面更新,需要下面这种方法 let user = shallowRef({ name: "daxue", age: 8 }) const change = () => { //1111111 user.value = { name: "xiaoxue", age: 9 } //22222222 user.value.name="xiaoxue"; triggerRef(user) }注意:shallowRef跟ref不能一起使用，因为ref使用了triggerRef,会影响shallowRef的只改变.value不改变具体值。 triggerRef手动执行与 shallowRef 关联的任何作用 (effect)。 谷歌调试工具小tips
这样直接查看ref具体值,不需要再点开value看里面具体值 |
【本文地址】
今日新闻 |
推荐新闻 |