const state = reactive({
msg: “”,
nmsg: “”,
cmsg: computed(() => {
// 1.计算属性
return state.msg.length;
}),
});
// 2.可以使用getCurrentInstance hook 来拿到当前实例化对象上下文信息，但是除非极其特殊的情况，否则不建议这样使用
const { ctx } = getCurrentInstance();
const input = () => {
// 在vue3中，因为是面向hooks函数编程，所以，无法通过this拿到当前vue实例化对象
console.log(ctx.$refs.myInput.value); // 像使用vue2中的this一样，使用ctx（上下文内容信息）
state.nmsg = ctx.$refs.myInput.value;
};
// 3.使用ref方法来定义一个响应式监听的对象，在实际开发中我们都是用这种方法来构建响应式对象
const hmsg = ref(“abc”);
const hmagInpu = () => {
// 在内部使用hmsg的值，需要使用value来获取对应的值
console.log(“获取到的hmsg值是：” + hmsg.value);
};
return {
// 4.使用toRefs hook方法方便，访问msg不需要使用state.msg，直接msg就可以获取到
…toRefs(state),
hmsg,
input,
hmagInpu,
};
},
});
小结：两种构建响应式对象的方法
1.reactive
1.reactive方法，直接传入一个对象 state ,这个对象就是 proxy 拦截的对象
2.然后再把这个 state 对象直接 return 出去就能被调用
3.在 temolate 中使用 state.msg 来访问
4.在 js 中也使用 state.msg 来访问
2.ref
1.使用 ref 直接声明一个 proxy 响应式对象 msg
2.然后把这个 msg 对象直接 return 出去
3.在 template 中直接使用 {{msg}}
4.注意：在 js 中需要使用 msg.value
4.watch、watchEffect 数据监听
watch、watchEffect 数据监听
{{ msg }}
{{ msg2 }}
{{ info }}
<button @click=“changeMsg”>changeMsg
<button @click=“changeMsg2”>changeMsg2
5.生命周期
-
setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
-
onBeforeMount() : 组件挂载到节点上之前执行的函数。
-
onMounted() : 组件挂载完成后执行的函数。
-
onBeforeUpdate(): 组件更新之前执行的函数。
-
onUpdated(): 组件更新完成之后执行的函数。
-
onBeforeUnmount(): 组件卸载之前执行的函数。
-
onUnmounted(): 组件卸载完成后执行的函数
- 若组件被
<keep-alive>包含，则多出下面两个钩子函数。
-
onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行 。
-
onDeactivated(): 比如从 A组件，切换到 B 组件，A 组件消失时执行。
Vue2--------------vue3
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
使用写法
let {ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured, onRenderTracked, onRenderTriggered} = Vue;
export default {
// setup相当于vue2中的beforeCreate和created，并且在两者之前执行
setup(){
let test = ref(‘测试’)
// 挂载开始之前被调用
onBeforeMount(()=>{
console.log(‘onBeforeMount’,test)
})
// 实例被挂载后调用，不会保证所有的子组件也被挂载完
onMounted(()=>{
console.log(‘onMounted’,test)
})
// DOM更新前
onBeforeUpdate(()=>{
console.log(‘onBeforeUpdate’,test)
})
// DOM更新后，不会保证所有的子组件也都一起被重绘
onUpdated(()=>{
console.log(‘onUpdated’, test)
})
// 卸载组件实例之前，此时实例仍然是完全正常的
onBeforeUnmount(()=>{
console.log(‘onBeforeUnmount’, test)
})
// 卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。
onUnmounted(()=>{
console.log(‘onUnmounted’, test)
})
// 当捕获一个来自子孙组件的错误时被调用
onErrorCaptured(()=>{
console.log(‘onErrorCaptured’,test)
})
// 跟踪虚拟 DOM 重新渲染时调用
onRenderTracked(()=>{
console.log(‘onRenderTracked’,test)
})
// 当虚拟 DOM 重新渲染为 triggered.Similarly 为renderTracked，接收 debugger event 作为参数。此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键。
onRenderTriggered(()=>{
console.log(‘onRenderTriggered’,test)
})
return {test};
}
}
vue3如何使用axios
-
安装
vue add axios -
删除main.js
import './plugins/axios
- 使用
import axios from “axios”;
onMounted(() => {
fetch();
});
function fetch() {
axios.get(“http://jsonplaceholder.typicode.com/users”).then((res) => {
console.log(res);
});
}
6.TodoList
TodoList 点餐
菜单列表
{{item.name}} 价格 {{item.price}}
<button @click=“add(index)”>点餐
已点菜单
{{item.name}} 价格 {{item.price}}
<button @click=“remove(index)”>取消
一共点了 {{count}} 道菜，消费 {{allPrice}} 元
读者福利
========
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）
