vue3基础

Vue3

setup配置项：

• 用于配置数据、方法，最后返回一个Promise对象或渲染函数（自定义的内容）
• setup中不会允许使用vue2的配置数据、方法，不过可能有同名的数据或方法
• setup不能是一个async方法，Vue 组件的生命周期钩子是同步的，这确保了组件在生命周期的每个阶段都可以可靠地执行预期的操作。如果 setup 方法是 async 的，会引入异步行为，这可能导致组件在完成 setup 之前就开始执行后续的生命周期钩子，这会导致状态的不确定性和潜在的错误
• setup在beforeCreate之前执行一次，此时this为undefined

如：

<script setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex';
const store = useStore();

// 表单引用对象
const loginFormRef = ref();

const loginForm = reactive({
  username: '',
  password: '',
});
// 校验规则
const loginRules = reactive({
  username: [
    { required: true,message: "输入用户名", trigger: 'blur' },
    { min: 2, max: 10, message: '长度请在2到10个字之间', trigger: 'blur' }
  ],
  password: [{ required: true,message: "请输入密码", trigger: 'blur' }],
});

const router = useRouter();

// 提交表单函数
const submitForm = ()=>{
  // 触发校验表单
  loginFormRef.value.validate((valid)=>{
    // 通过验证，提交表单内容
    if(valid){
      console.log(loginForm);
      axios.post("/adminapi/user/login",loginForm).then((value)=>{
        if(value.data.actionType === "ok"){
          // 设置token，由axios拦截配置
          // 调用changeUserInfo,使用户信息更新
          store.commit("changeUserInfo",value.data.data);
          // 路由跳转
          router.push("/index");
        }else{
          ElMessage.error('用户名或密码错误');
        }
      });
      
    }
  });
  
  
};

</script>

响应式原理：

ref()：适用于基本数据类型，原理也是数据劫持

常用于需要包装单个值

import { ref } from 'vue';

// 创建响应式数据count，初值为0
const count = ref(0);

// 使用.value方法修改count值
count.value = 2;

reactive()：定义一个对象型的响应式数据

常用于需要处理复杂的数据结构

基于es6的proxy实现，包含get、set

import { reactive } from 'vue';

// 创建响应式对象state，包含两个成员
const state = reactive({
  count: 0,
  message: 'Hello'
});

// 直接通过属性来访问和修改其包含的值
state.count = 1; 

reactive 创建的对象会深层次地进行响应式追踪，这意味着对象内部的所有属性都会被追踪

计算属性与监视

计算属性computed

• 计算属性用于基于其他响应式状态计算出一个新的值。计算属性的结果会被缓存，只有当其依赖的响应式状态发生变化时才会重新计算
• 适用于需要基于现有数据进行衍生计算，并希望在依赖的数据未改变时避免不必要的重新计算

import { computed } from 'vue'

const uploadAvatar = computed(()=>
  props.avatar.includes("blob")?props.avatar:'http://localhost:3000'+props.avatar
);

监视watch

• 监视器用于在某些响应式数据变化时执行特定的副作用函数。可以监视一个或多个响应式状态的变化，并在变化时执行回调函数。
• 适用于需要在数据变化时执行异步操作、复杂逻辑或副作用（例如 API 调用、手动 DOM 操作等）

import { ref, watch } from 'vue';

const count = ref(0);

// count改变时自动调用
watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});

watchEffect()

与 watch 不同，watchEffect 不需要显式地指定要监视的响应式数据，而是自动追踪在回调函数中使用的所有响应式状态

import { ref, watchEffect } from 'vue';

const count = ref(0);

watchEffect(() => {
  console.log(`Count is: ${count.value}`);
});

// 改变 count 的值将触发 watchEffect 的回调
count.value = 1; 

生命周期

钩子效果与vue2类似，新的两个钩子：

beforeUnmount：组件被取消挂载之前

unmounted：这个生命周期钩子在组件从 DOM 中移除后立即调用。在这个阶段，组件的实例仍然完全可用。常用于执行与 DOM 相关的清理操作，比如移除事件监听器或取消订阅等，所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止

Vue 3 中重命名为 unmounted 主要是为了更清晰地表达组件从 DOM 中移除这一动作，而不是“销毁”。这样可以更好地理解组件的生命周期阶段

可以+on前缀来调用生命周期钩子，如：

<script setup>
import { onMounted, onUnmounted } from 'vue'

let intervalId
onMounted(() => {
  intervalId = setInterval(() => {
    // ...
  })
})

onUnmounted(() => clearInterval(intervalId))
</script>

onMounted 的调用不是必须放在 setup() 或 <script setup> 内的词法上下文中。onMounted() 也可以在一个外部函数中调用，只要调用栈是同步的，且最终起源自 setup() 就可以

hook()

Hooks 和 Mixins 都是代码复用的策略，但它们的设计理念和使用方式有很大的区别

Hooks 是 Vue 3 引入的组合式 API 的一部分，通过使用函数将逻辑组合到一起，并在需要时调用这些函数，从而实现代码复用和逻辑分离。

Hooks 通过组合函数和响应式数据，实现逻辑的可组合和可重用

特点：

1. 函数式编程：Hooks 利用函数来封装逻辑，使代码更加模块化和可重用。
2. 避免冲突：由于 Hooks 通过函数返回值来共享逻辑，不会像 Mixins 那样直接混合属性和方法，从而避免命名冲突。
3. 逻辑清晰：Hooks 通过显式的函数调用，使得逻辑更加清晰，容易追踪和调试

// useMyHook.js
import { ref } from 'vue';

export function useMyHook() {
  const hookData = ref('This is hook data');
  
  function hookMethod() {
    console.log('This is hook method');
  }
  
  return {
    hookData,
    hookMethod
  };
}

// MyComponent.vue
import { defineComponent } from 'vue';
import { useMyHook } from './useMyHook';

export default defineComponent({
  setup() {
    const { hookData, hookMethod } = useMyHook();
    
    hookMethod();
    
    return {
      hookData
    };
  }
});

toRef()

toRef 用于将响应式对象的某个属性转换为 ref，从而使该属性可以单独作为响应式数据使用

它创建一个对原始对象属性的引用，而不是创建新的响应式对象

import { reactive, toRef } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello'
});

const countRef = toRef(state, 'count');

countRef.value = 10;
console.log(state.count); // 10

state.count = 20;
console.log(countRef.value); // 20

toRefs()

toRefs 用于将响应式对象的所有属性转换为 ref，从而使这些属性可以单独作为响应式数据使用。

它创建一个包含所有属性引用的新对象，而不是创建新的响应式对象。

import { reactive, toRefs } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello'
});

const { count, message } = toRefs(state);

count.value = 10;
console.log(state.count); // 10

state.message = 'Hi';
console.log(message.value); // Hi