vue3的基础使用(一)

ref()和reactive()

ref()

在组合式 API 中，推荐使用 ref() 函数来声明响应式状态：

可以看出，ref() 函数返回一个可变的响应式 ref 对象，它包含一个名为 value 的属性，我们可以通过 .value 访问其中的值：

//初始化加载样式
const loading = ref(true);
//是否开启弹窗
const dialogVisible = ref(false);
//弹窗标题
const dialogTitle = ref("");

//添加用户
const handleAddUser = () => {
  dialogTitle.value = "添加顶级用户";
  dialogType.value = 10;
  dialogVisible.value = true;
};

reactive()

reactive() 函数返回一个代理对象，这个代理对象会使其内部的所有属性都具有响应式。

//搜索查询条件
const where = reactive({
  //查找内容
  find: "",
  //查找下标
  findSelectIndex: 0,
  //时间范围
  timeRange: [],
  //是否禁用
  switch: null,
  //排序方式
  sortType: 2,
  // 0 不导出 1导出
  isExport: 0,
  // 导出类型 1本页 2全部
  exportType: 1,
  // 分页
  currentPage: 1,
  //每页条数
  pageSize: 10,
  //数据总数
  total: 0,
});

//创建表单
const propsCreateForm = reactive({
  source_user_uid: 0,
  phone: "",
  password: "abc123",
  nick_name: "",
  sex: 0,
});

//初始化分页条件
const initPageWhere = () => {
  where.isExport = 0;
  where.exportType = 1;
  where.currentPage = 1;
  where.pageSize = 10;
};

ref()和reactive()的区别

值得修改

1. ref() 函数返回一个可变的响应式 ref 对象，它包含一个名为 value 的属性，我们可以通过 .value 访问其中的值。
2. reactive(),可以直接使用不需要通过value访问

定义声明

1.ref() 函数可以用于字符串,数字,数组,对象等各种类型
2.reactive() 函数有限的值类型：它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型。

reactive() 不能替换整个对象

正确做法Object.assign()

示例如下:

//初始化表单
const initPropsCreateForm = () => {
  Object.assign(propsCreateForm, {
    source_user_uid: 0,
    phone: "",
    password: "",
    nick_name: "",
    sex: 0,
  });
};

reactive() 一旦解构,内部值的变化将无法检测

总结

1.基础简单类型（字符串、数字、布尔）、需要整体赋值覆盖的数组，统一用 ref()
2.固定结构的复杂对象、表单、查询条件，不整体替换的，统一用 reactive()
3.reactive() 不能替换整个对象,需要使用Object.assign()
4.reactive() 不能检测到对象内部值的变化,不能解构,一旦解构,内部值的变化将无法检测