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 通过组合函数和响应式数据，实现逻辑的可组合和可重用
特点：
- 函数式编程：Hooks 利用函数来封装逻辑，使代码更加模块化和可重用。
- 避免冲突：由于 Hooks 通过函数返回值来共享逻辑，不会像 Mixins 那样直接混合属性和方法，从而避免命名冲突。
- 逻辑清晰：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
原文地址：https://blog.csdn.net/qq_53922901/article/details/140523066
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！