读者福利
========
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
由于篇幅过长,就不展示所有面试题了,想要完整面试题目的朋友(另有小编自己整理的2024大厂高频面试题及答案附赠)
用法一:
setup() {
const num = ref(0);
const get_num = computed(() => num.value + "计算属性");
return {
num,
get_num,
};
},
用法二:
// 创建一个 ref 响应式数据
const count = ref(1)
// 创建一个 computed 计算属性
const plusOne = computed({
// 取值函数
get: () => count.value + 1,
// 赋值函数
set: val => {
count.value = val - 1
}
})
// 为计算属性赋值的操作,会触发 set 函数
plusOne.value = 9
// 触发 set 函数后,count 的值会被更新
console.log(count.value) // 输出 8
三、计算属性与数据监听
import { ref, computed, watch, watchEffect } from "vue";
export default {
setup() {
const count = ref(0);
const doubleCount = computed(() => {
return count.value \* 5;
});
watch(
() => count.value,
(val, oldVal) => {
console.log(`count is ${val}`);
},
{
//是否深度监听
deep: true,
//是否先执行一次
immediate: true
}
);
function add() {
count.value++;
}
return {
count,
add,
doubleCount
};
}
};
计算属性 computed
是一个方法,里面需要包含一个回调函数,当访问计算属性返回结果时,会自动获取回调函数的值。
监听器 watch
同样是一个方法,它包含 3个参数,前两个参数都是 function
,第三个参数为是否设置深度监听等。
第一个参数是监听的值,count.value
表示当 count.value
发生变化就会触发监听器的回调函数,即第二个参数,第二个参数可以执行监听时候的回调。
如果是2 个以上的监听属性,
watch(
[() => count.value, () => name.value],
//接收两个参数,第一个是新值在数组中,第二个是旧值也是在数组中
([count, name], [oldCount, oldName]) => {
console.log(count, name);
console.log(oldCount, oldName);
if (count != oldCount) {
console.log("count发声变化");
}
if (name != oldName) {
console.log("name发声变化");
}
}
);
四、获取路由
//获取当前组件实例
const vue = getCurrentInstance();
//获取当前上下文
const { ctx } = getCurrentInstance();
//获取路由信息
console.log(ctx.$router);
function changeRouter() {
//路由跳转
ctx.$router.push("/about");
}
五、生命周期
2.x
生命周期选项和Composition API
之间的映射
beforeCreate
->使用setup()
created
->使用setup()
beforeMount
->onBeforeMount
mounted
->onMounted
beforeUpdate
->onBeforeUpdate
updated
->onUpdated
beforeDestroy
->onBeforeUnmount
destroyed
->onUnmounted
errorCaptured
->onErrorCaptured
六、Vuex 简单应用
import Vuex from 'vuex'
export default Vuex.createStore({
state: {
num: 1,
},
mutations: {
add(state, value) {
console.log(value)
state.num++
},
decrement(state, value) {
console.log(value)
state.num--
}
},
actions: {
},
modules: {
}
});
挂载到Vue
中
import router from './router'
import store from './store'
createApp(App).use(router).use(store).mount('#app')
组件使用:
<template>
<div class="home">
<h1>VUEX使用</h1>
<div>原始值:{{num}}</div>
<div>
<button @click="add">增加</button>
<button @click="decrement">减少</button>
</div>
</div>
</template>
<script>
import { computed } from "vue";
import { useStore } from "vuex";
export default {
#### 总结一下
面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。
万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。
![](https://img-blog.csdnimg.cn/img_convert/621960a57eb42479e02d6d64c0c81891.png)
![](https://img-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)
**前端面试题汇总**
![](https://img-blog.csdnimg.cn/img_convert/42728594459506983a38ca2b86545fc6.png)