2.toRef与toRefs

小雨和小浩

已于 2024-07-23 10:59:04 修改

阅读量78

点赞数 1

分类专栏： vue3 文章标签： vue.js vue

于 2024-07-23 10:58:07 首次发布

本文链接：https://blog.csdn.net/angle_wty/article/details/140629309

版权

vue3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. 解构对象，改变属性无变化

import {ref, reactive, toRefs, toRef} from 'vue';
let person = reactive({name: '张三', age: 18})
// 对象解构，无变化
let {name, age} = person;
const upDateName = () => {
  name += '~'
  console.log(name);
}
const upDateAge = () => {
  age += 1
  console.log(age);
}

2.采用toRefs将对象中的所有属性结构为响应式

import {ref, reactive, toRefs, toRef} from 'vue';
let person = reactive({name: '张三', age: 18})
// 采用toRefs将对象中的属性结构为响应式
let {name, age} = toRefs(person);
const upDateName = () => {
  name.value += '~'
  console.log(name);
}
const upDateAge = () => {
  age.value += 1
  console.log(age);
}

3.采用toRef将对象中的指定属性结构为响应式

import {ref, reactive, toRefs, toRef} from 'vue';
let person = reactive({name: '张三', age: 18})
let {name, age} = toRefs(person);
let nl = toRef(person, 'age');
const upDateName = () => {
  name.value += '~'
  console.log(name);
}
const upDateAge = () => {
  age.value += 1
  console.log(age);
}