Vue3-admin 快速上手实战项目
1、vue3中全部采用函数式写法,替换了原来类的写法,
2、移除了原有的生命周期函数,和data、computed、watch、method等vue2中的对象,去掉了this, 并且去除了过滤器api -> filter
3、vue3源码全部采用ts编写,编码中实现了对ts更好的支持
4、vue3完全兼容vue2,在vue3中依然可以按照vue2的方式去写代码,而且两种写法可以同时存在,
5、组件中同时存在两种写法时,当setup返回值中定义的方法和methods中的方法同名时,会抛出错误。
定义的数据和data定义的数据字段相同时,会被data定义的字段覆盖
6、vue3采用proxy的方式实现数据代理,只会代理第一层数据 避免了vue2中对data的深层递归,提升了组件渲染性能
如下所示:
// 在vue3中定义一个响应式数据 const state = reactive({data: {obj: {}}}); state.data.obj = xxx;
返回的state是一个proxy对象,默认只会对data进行代理
那么vue3是怎么实现深层数据劫持呢,例如我们要修改obj那么是怎么监听到obj的修改呢
当我们要对深层对象obj进行修改时,会调用 state.data 的get方法,在get方法中会对state.data 进行代理,劫持state.data中的属性, get方法返回的不是state.data本身,而是被proxy代理过的对象,从而巧妙的实现了深层数据劫持,在用到该属性的时候一定会调用父级的get方法,这时候才会去劫持属性的get和set方法
一、setup函数
setup函数是vue3中所有api的入口和出口
vue3中用setup函数整合了所有的api, setup函数只执行一次,在生命周期函数前执行,所以在setup函数中拿不到当前实例this,不能用this来调用vue2写法中定义的方法
vue3中去掉了data,使用setup的返回值来给模板绑定value
return 的对象如果是常量,不会变成响应式数据
this.$emit 用 context.emit 方法来替代
// props - 组件接受到的属性, context - 上下文 setup(props, context){ return { // 要绑定的数据和方法 } }
二、生命周期
生命周期函数,都变成了回调的形式,写在setup函数中
可以一次写多个相同的生命周期函数,按照注册顺序执行
setup() { onMounted(() => { console.log('组件挂载1'); }); onMounted(() => { console.log('组件挂载2'); }); onUnmounted(() => { console.log('组件卸载'); }); onUpdated(() => { console.log('组件更新'); }); onBeforeUpdate(() => { console.log('组件将要更新'); }); onActivated(() => { console.log('keepAlive 组件 激活'); }); onDeactivated(() => { console.log('keepAlive 组件 非激活'); }); return {}; },
三、ref – 简单的响应式数据
1、ref可以将某个普通值包装成响应式数据,仅限于简单值,内部是将值包装成对象,再通过defineProperty来处理的
通过ref包装的值,取值和设置值的时候,需用通过value来进行设置
2、可以用ref来获取组件的引用,替代this.$refs的写法
<template> <div class="mine"> <input v-model="inputVal" /> <button @click="addTodo">添加</button> <ul> <li v-for="(item, i) in todoList" :key="i"> {{ item }} </li> </ul> </div> <div></div> </template> setup() { const inputVal = ref(''); const todoList = ref<string[]>([]); function addTodo() { todoList.value.push(inputVal.value); inputVal.value = ''; } return { addTodo, inputVal, todoList, }; },
四、reactive – 数据绑定
使用reactive来对复杂数据进行响应式处理,它的返回值是一个proxy对象,
在setup函数中返回时,可以用toRefs对proxy对象进行结构,方便在template中使用
通过reactive来创建响应式数据data,用toRefs来进行解构,在模板中直接使用 inputVal、todoList
模板中绑定的方法也需要 在setup函数中定义,并返回,才能绑定到模板中,例如addTodo方法
vue3模板: 一个templage可以有多个平级的标签(vue2中只能在template写一个子标签)
<template> <div class="mine"> <input v-model="inputVal" /> <button @click="addTodo">添加</button> <ul> <li v-for="(item, i) in todoList" :key="i"> {{ item }} </li> </ul> </div> <div></div> </template> setup() { const data = reactive({ inputVal: '', todoList: [], }); function addTodo() { data.todoList.push(data.inputVal); data.inputVal = ''; } return { ...toRefs(data), addTodo, }; },
五、 computed
计算属性,变成了函数写法,当依赖的值发生改变时会重新计算
computed包装后的值,需要用 .value去取值,template中不需要使用.value。
async setup() { const data = reactive({ a: 10, b: 20, }); let sum = computed(() => data.a + data.b); return { sum }; },
六、 watch
变成了函数写法,与vue2中用法相同
// 侦听一个 const state = reactive({ count: 0 }) watch( () => state.count, (count, prevCount) => { /* ... */ } ) // 直接侦听一个ref const count = ref(0) watch(count, (count, prevCount) => { /* ... */ })
七、watchEffect 新增方法
响应式地跟踪函数中引用的响应式数据,当响应式数据改变时,会重新执行函数
const count = ref(0) // 当count的值被修改时,会执行回调 watchEffect(() => console.log(count.value))
八、 vue-router
组件中使用路由时用useRoute和useRouter
import {useRoute, useRouter} from 'vue-router' const route = useRoute(); // 相当于 vue2 中的this.$route const router = useRouter(); // 相当于 vue2 中的this.$router route 用于获取当前路由数据 router 用于路由跳转
九、 vuex
使用useStore来获取store对象
从vuex中取值时,要注意必须使用computed进行包装,这样vuex中状态修改后才能在页面中响应
import {useStore} from 'vuex' setup(){ const store = useStore(); // 相当于 vue2中的 this.$store store.dispatch(); // 通过store对象来dispatch 派发异步任务 store.commit(); // commit 修改store数据 let category = computed(() => store.state.home.currentCagegory return { category } }
十、用jsx来定义vue组件
vue3中支持使用jsx语法来定义vue组件
export const AppMenus = defineComponent({ setup() { return () => { return ( <div class="app-menus"> <h1>这是一个vue组件</h1> </div> ); }; }, });
十一、插槽修改
<div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div>
一个不带 name 的 出口会带有隐含的名字“default”。
在向具名插槽提供内容的时候,我们可以在一个