关于 vue3.0 实战项目中遇到的问题
介绍vue3.0的特性：
亿点小知识
1.diff算法的优化 增加了静态标记PatchFlag
2.按需编译，体积比Vue2.x更小（Tree shaking）
3.Compostion API: 组合API/注入API
4.自定义渲染API（Custom Renderer API）
5.数据监听方式变成了Proxy，消除了Object.defineProperty现有的限制
1.setup 实战的两种写法：
第一种写法：
// 这种写法是 setup函数的写法 需要定义在setup内 然后在return 出去
// 这里也一并写了 vus3.0 props 接收参数的写法
export default {
props: {
title: String
},
setup(props) {
console.log(props.title)
}
return {
title
}
}
第二种写法：
<script lang="ts" setup>
// setup 语法糖 通过引入 vue，vue-router 等结构的方法来用 （推荐）
import {
onMounted, ref, reactive } from 'vue';
onMounted(() => {
// 生命周期 直接可以使用
})
// 接受 props参数
const props = withDefaults(defineProps(), {
label: ''
})
let name = ref('张三')
let obj = reactive({
name:"小红"，
age:18
})
</script>
2.ref 和 reactive
通俗理解 ref 和 reactive 都是用来定义响应式数据的 reactive更推荐去定义复杂的数据类型 ref 更推荐定义基本类型
<script lang="ts" setup>
// setup 语法糖 通过引入 vue，vue-router 等结构的方法来用 （推荐）
import {
ref, reactive } from 'vue';
这里的 ref 和 reactive 是用来创建数据双向绑定的 可以创建多个
我们在使用的时候 根据数据来选择是否使用 ref 或者 reactive
let name = ref('张三')
let obj = reactive({
name:"小红"，
age:18
})
// 更改数据
name.value = "李四" // 这里要注意的是 ref 使用 需要通过 .value更改数据
obj.name = "小绿" // reactive 就直接修改数据
</script>
3.一些常用的AIP
import {
useStore } from "vuex"; // 先引入 然后在解构
const store = useStore();// 实例化
import {
useRouter, useRoute } from 'vue-router'; // router 也是一样的使用方法
const router = useRouter()
const route = useRoute()
router.push({
path:""/""}) // 路由跳转
在main.js中的改动
const app = createApp(App);
app.use(router).use(store).mount('#app') // 这里变成了 链式的写法
如果对你有用的话。可以关注收藏博客 作者会持续更新…