unref
如果参数是一个
ref，则返回内部值，否则返回参数本身。
toRef
将对象的某个属性转为响应式，修改值时原始值也会改变，但是值改变不会更新视图
使用示例：
<template> <div class="home"> <div>{
{
userInfo.name}}</div> <div>{
{
userInfo.age}}</div> <button @click="changeUserName">修改名称</button> <button @click="changeUserAge">修改年龄</button> </div> </template> <script lang="ts"> import {
defineComponent, ref, reactive, toRef, toRefs, } from 'vue'; export default defineComponent({
name: 'Home', setup(props, context) {
const userInfo ={
name: '张三', age: 18, }; // 第一个参数为源对象，第二个参数为源对象中的属性名，值改变不会更新视图 const toRefData = toRef(userInfo, 'age'); setTimeout(() => {
// 通过 value 直接修改上面的 age 值 toRefData.value = 20; }, 1000); function changeUserName() {
userInfo.name = '李四'; } function changeUserAge() {
userInfo.age = 100; } return {
userInfo, changeUserName, changeUserAge, }; }, }); </script> 讯享网
toRefs
将对象的全部属性转换为响应式，修改值时原始值也会改变，但是值改变不会更新视图
示例
讯享网<template> <div class="home"> <div>{
{
userInfo.name}}</div> <div>{
{
userInfo.age}}</div> <button @click="changeUserName">修改名称</button> <button @click="changeUserAge">修改年龄</button> </div> </template> <script lang="ts"> import {
defineComponent, ref, reactive, toRef, toRefs, } from 'vue'; export default defineComponent({
name: 'Home', setup(props, context) {
const userInfo = {
name: '张三', age: 18, }; const toRefsData = toRefs(userInfo); setTimeout(() => {
// 通过 属性.value 修改值 toRefsData.age.value = 20; }, 1000); console.log('toRefsData', toRefsData); function changeUserName() {
userInfo.name = '李四'; } function changeUserAge() {
userInfo.age = 100; } return {
userInfo, changeUserName, changeUserAge, }; }, }); </script>
isRef
检查值是否为一个 ref 对象。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/53159.html