Vue3.0基础

学习目标：

初识setup
setup函数的注意点：
1、由于在执行 setup函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用 data 和 methods 的变量和方法
2、由于我们不能在 setup函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined
3、setup函数只能是同步的不能是异步的

<template>
<h1>我是App组件{{name}}</h1>
<h2>{{age}}</h2>
<!-- <button>{{sayHello}}</button> -->
</template>

<script>
import {h} from 'vue'
export default {
  name: 'App',
setup(){
  let name='张三'
  let age =18
 function sayHello(){
   alert(`我叫${name},我是${age},你好啊`)
 }
 //返回一个对象
  // return{
  //   name,
  //   age,
  //   sayHello
  // }
  //返回一个函数
  return ()=>{return h('h1','尚未古')}
}
}
</script>

Vue3: 知识总结 : toRefs 函数

toRefs() 函数可以将 reactive() 创建出来的响应式对象, 转换为普通对象, 只不过这个普通对象上的而每一个属性都是响应式的, 这样我们 用 es6 的对象解构赋值的时候, 就可以了,不会出现问题了

应用: 当从合成函数返回响应式对象时，toRefs 非常有用，这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用

问题: reactive 对象取出的所有属性值都是非响应式的

解决: 利用 toRefs 可以将一个响应式 reactive 对象的所有原始
属性转换为响应式的 ref 属性

<template>
  <div class="login-box">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="120px"
      class="ruleForm"
    >
      <el-form-item label="账号" prop="userName">
        <el-input v-model="ruleForm.userName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="ruleForm.password"
          type="password"
          autocomplete="off"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  setup() {
    const data = reactive({
      ruleForm: {
        userName: "",
        password: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 6, max: 24, message: "账号长度6-24之间", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 24, message: "密码长度6-24之间", trigger: "blur" },
        ],
      },
    });
    return {
      ...toRefs(data),
    };
  },
});
</script>

<style lang="scss" scoped>
.login-box {
  width: 100%;
  height: 100%;
  /* background: url("../assets/logo.png");  */
  background-color: rgb(163, 89, 130);
  .ruleForm {
    width: 450px;
    padding: 20px;
    background: burlywood;
    border-radius: 20px;
    margin: 0 auto;
  }
}
</style>