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 的 <slot> 出口会带有隐含的名字“default”。
在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称，也可以使用v-slot的简写方式#， v-slot:header等价于 #header
<base-layout>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<template v-slot:default>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>
<template #footer>
<p>Here's some contact info</p>
</template>
</base-layout>
十二、Suspense 和 异步 setup
<Suspense>
<template #default>
<home-swiper></home-swiper>
</template>
<template #fallback>
<div>loading...</div>
</template>
</Suspense>
组件的setup方法使用异步，页面在加载时会先显示 fallback内容，当setup函数执行完毕才会正常加载 home-swiper组件
async setup() {
let store = useStore();
let sliderList = computed(() => store.state.home.sliders);
// 计算属性，需要多加 .value
if (sliderList.value.length === 0) {
// 缓存 如果没有数据，请求接口获取
await store.dispatch(`home/${Types.SET_SLIDER_LIST}`);
}
return { sliderList };
},
网友评论