About the problems encountered in the vue3.0 actual combat project
Introduce the features of vue3.0:
亿点小知识
1. The optimization of the diff algorithm adds a static tag PatchFlag
2. On-demand compilation, smaller than Vue2.x (Tree shaking)
3. Compostion API: Composition API/Injection API
4. Custom rendering API (Custom Renderer API)
5 .The data monitoring method has been changed to Proxy, eliminating the existing limitations of Object.defineProperty
1. Two ways to write setup in actual combat:
第一种写法：
// 这种写法是 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 and reactive
Popular understanding ref and reactive are both used to define responsive data. Reactive is more recommended to define complex data types. Ref is more recommended to define basic types.
<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. Some commonly used AIPs
import {
useStore } from "vuex"; // 先引入 然后在解构
const store = useStore();// 实例化
import {
useRouter, useRoute } from 'vue-router'; // router 也是一样的使用方法
const router = useRouter()
const route = useRoute()
router.push({
path:""/""}) // 路由跳转
Changes in main.js
const app = createApp(App);
app.use(router).use(store).mount('#app') // 这里变成了 链式的写法
If it works for you. You can pay attention to favorite bloggers and will continue to update...