6度建筑人才网,徐州seo关键词,黑马程序员python教程,wordpress内部架构ref 与 reactive 是 vue3 提供给我们用于创建响应式数据的两个方法。
reactive 常用于创建引用数据#xff0c;例如#xff1a;object、array 等。
reactive 则是通过 proxy 来实现的响应式数据#xff0c;并配合 reflect 操作的源对象。 reactive 创建引用数据#xff1…ref 与 reactive 是 vue3 提供给我们用于创建响应式数据的两个方法。
reactive 常用于创建引用数据例如object、array 等。
reactive 则是通过 proxy 来实现的响应式数据并配合 reflect 操作的源对象。 reactive 创建引用数据
templatep姓名{{ info.name }}/pp年龄{{ info.age }}/pp性别{{ info.sex }}/pbutton clickeditInfo修改信息/button
/templatescript
// 引入 reactive 函数
import { reactive } from vue
export default {name: Home,setup() {// 使用 reactive 创建引用数据const info reactive({name: 张三,age: 20,sex: 男});// 创建方法const editInfo () {info.name 李四;info.age 22;info.sex 女;// reactive 创建的数据是一个 proxy 对象不需要通过 value 获取console.log(info);}// 返回数据return {info,editInfo}}
}
/script
reactive 只能创建引用数据数组或对象。另外通过 reactive 创建的数据可以直接使用不需要通过 value 属性获取。 注reactive 创建的是一个深层次的数据对象不论多少层reactive 都能检测到数据的变化 reactive 创建数组
templatep v-foritem in userList :keyitem{{ item }}/pbutton clickeditUser修改人员/button
/templatescript
// 引入 reactive 函数
import { reactive } from vue
export default {name: Home,setup() {// 使用 reactive 创建数组const userList reactive([张三, 李四, 王五]);// 创建方法const editUser () {// vue3 通过下标修改数据时页面也会实时更新userList[0] 张三丰;console.log(userList);}// 返回数据return {userList,editUser}}
}
/script 注vue3 通过下标修改数据时页面也会实时更新。 原创作者吴小糖
创作时间2023.11.23
