一、先搞懂Vue3 是什么是前端框架用来做网页、后台管理、小程序、App比 Vue2更快、更小、更好用二、最核心Vue3 两种写法必须会1选项式 APIVue2 写法简单适合新手、小项目export default { data() { return { count: 0 } }, methods: { add() {} }, computed: {}, watch: {}, mounted() {} }2组合式 APIVue3 推荐写法必学适合大项目、逻辑复用、TSscript setup // 所有代码直接写这里 /script三、响应式核心最重要1. ref —— 用来定义 数字 / 字符串 / 布尔import { ref } from vue const name ref(张三) const age ref(18) const isShow ref(true)使用name.value 李四 // JS 里要加 .value模板不用 .valuediv{{ name }}/div2. reactive —— 用来定义 对象 / 数组import { reactive } from vue const user reactive({ name: 张三, age: 18 }) const list reactive([1,2,3])使用user.name 李四 // 不用 .value3. toRefs —— 解构 reactive 不丢失响应式import { toRefs } from vue const user reactive({ name: zs }) const { name } toRefs(user) // 解构后依然响应式4. computed 计算属性import { computed } from vue const doubleCount computed(() { return count.value * 2 })5. watch 监听数据变化// 监听 ref watch(count, (newVal) { console.log(变了, newVal) }) // 监听 reactive watch(() user.name, (newVal) {})6. watchEffect —— 自动监听超级好用watchEffect(() { // 里面用到谁就自动监听谁 console.log(count.value) })四、生命周期页面加载、更新、销毁直接引入使用import { onMounted, onUpdated, onUnmounted } from vue // 页面加载完 onMounted(() { console.log(页面渲染完成) }) // 数据更新后 onUpdated(() {}) // 页面销毁 onUnmounted(() {})五、模板语法页面怎么写1. 插值{{ name }}2. 条件渲染div v-ifisShow显示/div div v-else隐藏/div3. 循环div v-foritem in list :keyitem.id {{ item.name }} /div4. 绑定事件button clickadd1/button5. 双向绑定input v-modelname /6. Vue3 支持多根节点不用套一层 divtemplate div1/div div2/div /template六、组件通信父 ↔ 子1. 父 → 子 传值props子组件const props defineProps({ title: String, list: Array })父组件Child :titlexxx :listlist /2. 子 → 父 传值emit子组件const emit defineEmits([change]) function send() { emit(change, 我是子组件数据) }父组件Child changehandleChange /3. 跨多层组件传值provide /inject父组件import { provide } from vue provide(name, 张三)后代组件import { inject } from vue const name inject(name)七、全局常用功能1. 绑定属性div :class{ red: isRed }/div div :style{ color: textColor }/div2. 动态组件component :iscomName/component3. 缓存组件KeepAliveKeepAlive router-view / /KeepAlive4. 传送门Teleport把模态框插到 bodyteleport tobody div我在页面最顶层/div /teleport八、表单input v-modelname / textarea v-modeldesc/textarea select v-modelselectVal/select九、路由页面跳转Vue Routerimport { useRouter } from vue-router const router useRouter() // 跳转 router.push(/home) // 返回 router.back()十、状态管理Pinia// 定义 const useUserStore defineStore(user, { state: () ({ name: zs }), actions: { setName() {} } }) // 使用 const store useUserStore() store.name十一、请求接口axiosimport axios from axios async function getData() { const res await axios.get(/api/list) }十二、Vue3 最重要的 10 个点小白必背script setup是官方推荐写法ref用于简单类型reactive用于对象数组JS 里访问ref要加.valuecomputed计算值watch监听值组件通信props / emit / provide/inject生命周期onMounted最常用支持多根节点Teleport做模态框神器Pinia替代 Vuex响应式原理用Proxy比 Vue2 强很多
Vue3 所有核心知识点
一、先搞懂Vue3 是什么是前端框架用来做网页、后台管理、小程序、App比 Vue2更快、更小、更好用二、最核心Vue3 两种写法必须会1选项式 APIVue2 写法简单适合新手、小项目export default { data() { return { count: 0 } }, methods: { add() {} }, computed: {}, watch: {}, mounted() {} }2组合式 APIVue3 推荐写法必学适合大项目、逻辑复用、TSscript setup // 所有代码直接写这里 /script三、响应式核心最重要1. ref —— 用来定义 数字 / 字符串 / 布尔import { ref } from vue const name ref(张三) const age ref(18) const isShow ref(true)使用name.value 李四 // JS 里要加 .value模板不用 .valuediv{{ name }}/div2. reactive —— 用来定义 对象 / 数组import { reactive } from vue const user reactive({ name: 张三, age: 18 }) const list reactive([1,2,3])使用user.name 李四 // 不用 .value3. toRefs —— 解构 reactive 不丢失响应式import { toRefs } from vue const user reactive({ name: zs }) const { name } toRefs(user) // 解构后依然响应式4. computed 计算属性import { computed } from vue const doubleCount computed(() { return count.value * 2 })5. watch 监听数据变化// 监听 ref watch(count, (newVal) { console.log(变了, newVal) }) // 监听 reactive watch(() user.name, (newVal) {})6. watchEffect —— 自动监听超级好用watchEffect(() { // 里面用到谁就自动监听谁 console.log(count.value) })四、生命周期页面加载、更新、销毁直接引入使用import { onMounted, onUpdated, onUnmounted } from vue // 页面加载完 onMounted(() { console.log(页面渲染完成) }) // 数据更新后 onUpdated(() {}) // 页面销毁 onUnmounted(() {})五、模板语法页面怎么写1. 插值{{ name }}2. 条件渲染div v-ifisShow显示/div div v-else隐藏/div3. 循环div v-foritem in list :keyitem.id {{ item.name }} /div4. 绑定事件button clickadd1/button5. 双向绑定input v-modelname /6. Vue3 支持多根节点不用套一层 divtemplate div1/div div2/div /template六、组件通信父 ↔ 子1. 父 → 子 传值props子组件const props defineProps({ title: String, list: Array })父组件Child :titlexxx :listlist /2. 子 → 父 传值emit子组件const emit defineEmits([change]) function send() { emit(change, 我是子组件数据) }父组件Child changehandleChange /3. 跨多层组件传值provide /inject父组件import { provide } from vue provide(name, 张三)后代组件import { inject } from vue const name inject(name)七、全局常用功能1. 绑定属性div :class{ red: isRed }/div div :style{ color: textColor }/div2. 动态组件component :iscomName/component3. 缓存组件KeepAliveKeepAlive router-view / /KeepAlive4. 传送门Teleport把模态框插到 bodyteleport tobody div我在页面最顶层/div /teleport八、表单input v-modelname / textarea v-modeldesc/textarea select v-modelselectVal/select九、路由页面跳转Vue Routerimport { useRouter } from vue-router const router useRouter() // 跳转 router.push(/home) // 返回 router.back()十、状态管理Pinia// 定义 const useUserStore defineStore(user, { state: () ({ name: zs }), actions: { setName() {} } }) // 使用 const store useUserStore() store.name十一、请求接口axiosimport axios from axios async function getData() { const res await axios.get(/api/list) }十二、Vue3 最重要的 10 个点小白必背script setup是官方推荐写法ref用于简单类型reactive用于对象数组JS 里访问ref要加.valuecomputed计算值watch监听值组件通信props / emit / provide/inject生命周期onMounted最常用支持多根节点Teleport做模态框神器Pinia替代 Vuex响应式原理用Proxy比 Vue2 强很多
