家具网站设计方案,微信备份如何转换为wordpress,企业产品推广策划方案,漂亮网站设计声明响应式状态
ref()
在组合式 API 中#xff0c;推荐使用 ref() 函数来声明响应式状态#xff1a; ref() 接收参数#xff0c;并将其包裹在一个带有 .value 属性的 ref 对象中返回#xff1a;
import { ref } from vue
const count ref(0)console.log(count) // { va…声明响应式状态
ref()
在组合式 API 中推荐使用 ref() 函数来声明响应式状态 ref() 接收参数并将其包裹在一个带有 .value 属性的 ref 对象中返回
import { ref } from vue
const count ref(0)console.log(count) // { value: 0 }
console.log(count.value) // 0count.value
console.log(count.value) // 1形式1 setup() 函数 要在组件模板中访问 ref请从组件的 setup() 函数中声明并返回它们
script langts
import { ref } from vueexport default {setup() {const count ref(0)function increment() {// 在 JavaScript 中需要 .valuecount.value}// 不要忘记同时暴露 increment 函数return {count,increment}}
}
/scripttemplatediv classcontainerdiv{{ count }}/divbutton clickcount{{ count }}/button/div
/templatestyle scoped
.container {}
/style注意在模板中使用 ref 时我们不需要附加 .value。为了方便起见当在模板中使用时ref 会自动解包 (有一些注意事项)。 在模板渲染上下文中只有顶级的 ref 属性才会被解包。 在下面的例子中count 和 object 是顶级属性但 object.id 不是
const count ref(0)
const object { id: ref(1) }//模版正常渲染执行
{{ count 1 }} //模版不会正常渲染非顶级不会被解包仍然是一个ref
{{ object.id 1 }} 对象//我们可以将 id 解构为一个顶级属性
const { id } object
{{ id 1 }} //模版正常渲染并执行//模版自动解包
{{ object.id }}
该特性仅仅是文本插值的一个便利特性等价于 {{ object.id.value }}
形式2 script setup 在 setup() 函数中手动暴露大量的状态和方法非常繁琐。 幸运的是我们可以通过使用单文件组件 (SFC) 来避免这种情况。我们可以使用 script setup 来大幅度地简化代码
script setup langts
import { ref } from vueconst count ref(0)function increment() {count.value
}
/scripttemplatebutton clickincrement{{ count }}/button
/template深层响应性 Ref 可以持有任何类型的值包括深层嵌套的对象、数组或者 JavaScript 内置的数据结构比如 Map。 Ref 会使它的值具有深层响应性。这意味着即使改变嵌套对象或数组时变化也会被检测到
script setup langts
import { ref } from vueconst count ref(0)
const obj ref({nested: { count: 0 },arr: [foo, bar]
})function mutateDeeply() {// 以下都会按照期望工作obj.value.nested.countobj.value.arr.push(baz)
}function increment() {count.value
}
/scripttemplate{{ obj.arr }}button clickmutateDeeply{{ obj.nested.count 1 }}/button
/templateshallow ref 可以通过 shallow ref 来放弃深层响应性 减少大型不可变数据的响应性开销 与外部状态系统集成
DOM 更新时机 当你修改了响应式状态时DOM 会被自动更新。但是需要注意的是DOM 更新不是同步的。 Vue 会在“next tick”更新周期中缓冲所有状态的修改以确保不管你进行了多少次状态修改每个组件都只会被更新一次。
要等待 DOM 更新完成后再执行额外的代码可以使用 nextTick() 全局 API
script setup langts
import { ref } from vue
import { nextTick } from vueconst count ref(0)async function increment() {count.valueconsole.log(document.querySelector(button)?.textContent);// 这里会立即打印 0await nextTick()// 现在 DOM 已经更新了console.log(document.querySelector(button)?.textContent);// 这里会立即打印 1
}
/scripttemplatebutton clickincrement{{ count }}/button
/template
