vue3核心基本语法使用方法

<template>
  <div>
    <h2>用户管理列表</h2>
    <h2>nameNumber {{ nameNumber("set") }}</h2>

    <el-row>
      <el-form :inline="true" @submit.native.prevent>
        <el-form-item label="">
          <el-input
              @keyup.enter.native="selectClick"
              clearable
              v-model="nameWatch.test"
              maxlength="50"
              show-word-limit
              placeholder="请输入nameWatch"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input
            @keyup.enter.native="selectClick"
            clearable
            v-model="mobileNo"
            maxlength="50"
            show-word-limit
            placeholder="请输入手机号"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input
              @keyup.enter.native="selectClick"
              clearable
              v-model="name"
              maxlength="50"
              placeholder="请输入姓名"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select
              v-model="selectForm.selectValue"
              filterable
              clearable
              placeholder="是否选择"
              @change="selectClick"
          >
            <!--<el-option label="全部" :value="null"></el-option>-->
            <el-option
                v-for="(value, key, i) of selectArr"
                :key="i"
                :label="value"
                :value="key"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button  type="primary" @click="selectClick"
          >查 询</el-button
          >
        </el-form-item>
      </el-form>
    </el-row>

    <el-table :data="tableDataTest" style="width: 100%">
      <el-table-column prop="date" label="Date" width="200" />
      <el-table-column prop="name" label="Name" width="300" />
      <el-table-column prop="address" label="Address" />
    </el-table>

    <el-pagination
      @current-change="currentChange"
      layout="prev, pager, next"
      :total="50"
    />
  </div>
</template>
<script>
export default {
  data(){
    return {

    }
  }
};
</script>
<script setup>
import { queryPersonalUserInfoForPage } from "@/api/registUser";
import {
  onMounted,
  reactive,
  ref,
  toRefs,
  computed,
  toRef,
  watchEffect,
  watch,
  watchSyncEffect,
  watchPostEffect
} from "vue";

const tableData = [
  {
    date: "2016-05-03",
    name: "Tom123",
    address: "No. 189, Grove St, Los Angeles",
  },
];


onMounted(() => {
  // 引用计算属性并传值进去
  console.error("11-引用计算属性并传值进去--nameNumber--",nameNumber.value("aa"))

  tableDataTest.value = tableData;
  getDataList();
});


/**
 * 搜索
 */
/*
 * ref 和 reactive的区别
 *
 * 1.reactive 接受入参必须是对象形式，而 ref 可以是对象形式，也可以是一个单值。
 * 2.ref 必须从.value 属性中读取值
 *
 *
 */

// ref 浅层次的响应式 一般用于定义基本数据类型
let name = ref("")

// reactive 让对象转为具有深层次响应式 一般用于定义复杂数据类型（json、数组）
let selectForm = reactive({
  mobileNo: "",
  selectValue:"",
});

let selectArr = ref({
    1:"测试1",
    2:"测试2",
    3:"测试3"
  })

/*
 * toRef 和 toRefs 的区别
 *
 * 1.toRefs 只会为源对象中包含的 property 生成 ref,
 *   将对象转换为普通对象，且不丢失对源对象的响应式链接，
 *   即修改源对象属性值，生成的新的普通对象的对应属性值(ref)也会修改，反之亦然。
 * 2.toRef 为特定的 property 创建 ref, 同样也会保持响应式链接。
 * 3.toRef: 复制 reactive 里的单个属性并转成 ref
 *   toRefs: 复制 reactive 里的所有属性并转成 ref
 * 
3、结论
ref复制， 修改响应式数据，不会影响以前的数据，界面会更改。
toRef引用， 修改响应式的数据，会影响以前的数据，界面不会更新。

总结：
ref和toRef的区别
(1). ref本质是拷贝，修改响应式数据不会影响原始数据；toRef的本质是引用关系，修改响应式数据会影响原始数据
(2). ref数据发生改变，界面会自动更新；toRef当数据发生改变是，界面不会自动更新
(3). toRef传参与ref不同；toRef接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性

 */

// toRefs 把object对象解构
const { mobileNo } = toRefs(selectForm);
let selectValueRef = toRef(selectForm,"selectValue");
const selectClick = () => {
  console.error("selectClick--请求接口--selectForm--",selectForm);
  console.error("value--name--",name.value,selectForm.mobileNo,mobileNo.value,selectForm.selectValue)
  console.error("selectValueRef--",selectValueRef.value)
  getDataList([
    {
      date: "2022-09-09",
      name: "lyc-win-win-select",
      address: "China",
    },
  ])

  // selectArr.value = {
  //   11:"测试111111",
  //   22:"测试222222",
  //   33:"测试333333"
  // }
}

// computed 计算属性使用
// const nameNumber = computed(() => mobileNo.value + name.value)

// const nameNumber = computed({
//   get:() => mobileNo.value + name.value,
//   set:(value) =>{
//     return value + mobileNo.value + name.value
//   }
// })
// computed 计算属性(传值)使用
const nameNumber = computed(()=>(value)=>{
  return value + mobileNo.value + name.value
})


// watchEffect 监听使用
// 一般情况下使用默认的就行，除非是有什么特殊的要求，在选择post或者sync使用
// 取消监听，直接调用 watchEffectTemp()，watchEffect返回取消监听的方法

// flush: 'pre' 默认情况下，侦听器将在组件渲染之前执行
const watchEffectTemp = watchEffect(() => {
  let temp = selectForm
  console.log("watchEffect--temp--",temp);
  console.log("watchEffect--name--",name.value);
  console.log("watchEffect--mobileNo--",mobileNo);
  console.log("watchEffect--selectValue--",selectForm.selectValue);
});

// flush: 'post' 将会使侦听器延迟到组件渲染之后再执行
const watchPostEffectTemp = watchPostEffect(() => {
  console.log("watchPostEffect--selectValue--",selectForm.selectValue);
})

// flush: 'sync' 在响应式依赖发生改变时立即触发侦听器
const watchSyncEffectTemp = watchSyncEffect(() => {
  console.log("watchSyncEffectTemp--selectValue--",selectForm.selectValue);
})

// watch 监听使用
let nameWatch = ref({
  test:""
})
let tempWatch = watch(
    nameWatch,
    (newV,oldV)=>{
      console.error("watch--name--",newV,oldV)
      getDataList([
        {
          date: "2022-09-09",
          name: "lyc-win-win-select-watch",
          address: "China",
        },
      ])
    },
    {
      // immediate:true,
      deep:true
    }
)
// setTimeout(()=>{
//   console.error("停止监听")
//   // 停止监听
//   tempWatch()
// }, 1000 * 10)




/**
 * 查询列表数据
 */
let tableDataTest = ref([]);
const getDataList = (value) => {
  console.error("请求接口--");
  // queryPersonalUserInfoForPage().then((res) => {
  //   console.error("res--", res);
  // });
  setTimeout(() => {
    name.value = "修改名字"
    selectForm.mobileNo = "修改手机号"
    // nameNumber.value = "test-set"
    // console.error("nameNumber--",nameNumber.value())

    // 引用计算属性并传值进去
    console.error("22-引用计算属性并传值进去--nameNumber--",nameNumber.value("aa"))

    nameNumber.value = "testtest"

    tableDataTest.value = value || [
      {
        date: "2022-09-09",
        name: "lyc",
        address: "China",
      },
    ];
  }, 1000);
};


/**
 * 分页查询
 */
const currentChange = () => {
  getDataList([
    {
      date: "2022-09-09",
      name: "lyc-win-win",
      address: "China",
    },
  ])
};


</script>