Vue3面试真题（6题）PDF 下载
相关截图：
主要内容：
1.2.3.1.2. Compostion API
⽽ Compositon API 正是解决上述问题，将某个逻辑关注点相关的代码全都放在⼀个函数⾥，这样当
需要修改⼀个功能时，就不再需要在⽂件中跳来跳去
下⾯举个简单例⼦，将处理 count 属性相关的代码放在同⼀个函数了
function useCount() {
let count = ref(10);
let double = computed(() => {
return count.value * 2;
});
const handleConut = () => {
count.value = count.value * 2;
};
console.log(count);
return {
count,
double,
handleConut,
};
}
组件上中使⽤ count
export default defineComponent({
setup() {
const { count, double, handleConut } = useCount();
return {
count,
double,
handleConut
}
},
});
再来⼀张图进⾏对⽐，可以很直观地感受到 Composition API
在逻辑组织⽅⾯的优势，以后修改⼀
个属性功能的时候，只需要跳到控制该属性的⽅法中即可
1.2.3.2. 逻辑复⽤
在 Vue2 中，我们是⽤过 mixin
去复⽤相同的逻辑
下⾯举个例⼦，我们会另起⼀个 mixin.js ⽂件
export const MoveMixin = {
data() {
return {
x: 0,
y: 0,
};
},
methods: {
handleKeyup(e) {
console.log(e.code);
// 上下左右 x y
switch (e.code) {
case "ArrowUp":
this.y--;
break;
case "ArrowDown":
this.y++;
break;
case "ArrowLeft":
this.x--;
break;
case "ArrowRight":
this.x++;
break;
}
},
},
mounted() {
window.addEventListener("keyup", this.handleKeyup);
},
unmounted() {
window.removeEventListener("keyup", this.handleKeyup);
},
};
|
苏公网安备 32061202001004号
