vue3+ts项目声明响应式数据

标签：name reactive age ts value 响应 let vue3 ref

说明：在项目开发中，需要声明响应式数据来实现界面的响应从而实现前后端数据的交互。我们主要分为两类来举例。

• 基本数据类型

声明方式

let xxx= ref<type>('defaultValue');
let xxx= ref('defaultValue')

举例说明

let name = ref<string>('coco');
let newname = ref('');
let age = ref<number>(18);
let newage=ref(16)
let isNewFlag=ref<boolean>(true)
let isOldFlag=ref(false)

修改数据举例（在方法中需通过.value去进行修改）

const changeName = () => {
    if (newname.value) {
        name.value = newname.value;
        newname.value = '';
    }
};

• 引用数据类型

声明方式

let arr = reactive<type[]>([]);
let arr = reactive([]);
let obj = reactive<type>({})
let obj = reactive({})

举例说明

//对于对象，可通过interface对其进行预先定义
interface iUser {
    name: string;
    age: number;
    hobbies?: string[];
}
let userObj = reactive<iUser>({
    name: 'nico',
    age: 16,
    hobbies: ['dancing']
});
let newUserObj=reactive({
    name:'nini',
    age:12
});

　let userList = reactive<iUser[]>([{ name: 'nini', age: 12 }]); 　let newuserList=reactive([{ name: 'nini', age: 12 }])

修改数据举例

function changeNico() {
    userObj.age = 12;
    userObj.hobbies?.push('singing');
}

 

标签：name,reactive,age,ts,value,响应,let,vue3,ref
From： https://www.cnblogs.com/nicoz/p/16643624.html