前端之旅

2022年11月2日

摘要： provide依赖注入 // provide 和 inject 通常成对一起使用，使一个祖先组件作为其后代组件的依赖注入方，无论这个组件的层级有多深都可以注入成功，只要他们处于同一条组件链上。 // 只能在setup语法糖或者setup函数中使用，其他optionsApi只能使用配置方式 impor 阅读全文

posted @ 2022-11-02 19:48 前端之旅阅读(172) 评论(0) 推荐(0) 编辑

异步组件

摘要：异步组件 // index.vue import { defineAsyncComponent } from 'vue' const Dialog = defineAsyncComponent(() => import('./Dialog/index.vue')) // vue3 内置组件，用于协阅读全文

posted @ 2022-11-02 18:30 前端之旅阅读(113) 评论(0) 推荐(0) 编辑

动态组件

摘要：动态组件 import A from './A.vue' import B from './B.vue' import C from './C.vue' import { markRaw, reactive } from 'vue' type Tabs = { name: string comNam 阅读全文

posted @ 2022-11-02 17:18 前端之旅阅读(29) 评论(0) 推荐(0) 编辑

2022年11月1日

父子组件传值

摘要：父向子传递 // 父组件 <Child title="我是父组件的标题" :list="[1,2,3]" /> // 子组件接收 import { ref } from "vue"; type Props = { title: string; list: number[]; data?: numbe 阅读全文

posted @ 2022-11-01 19:10 前端之旅阅读(32) 评论(0) 推荐(0) 编辑

生命周期

摘要： vue3生命周期 import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onRenderTracked, onRenderTriggered, onUnmounted, onUpdated, } from "vue"; 阅读全文

posted @ 2022-11-01 18:26 前端之旅阅读(34) 评论(0) 推荐(0) 编辑

computed，watch，watchEffect

摘要： computed import { computed, ref } from "vue"; const firstName = ref(""); const lastName = ref(""); const name = computed(() => firstName.value + lastN 阅读全文

posted @ 2022-11-01 18:04 前端之旅阅读(26) 评论(0) 推荐(0) 编辑

toRef toRefs toRaw使用

摘要： // 只能修改响应式对象的值 const person = reactive({ name: "zhangsan", age: 18 }); // 将age属性单独提出来响应式数据 const ageCopy = toRef(person, "age"); const change = () => 阅读全文

posted @ 2022-11-01 17:15 前端之旅阅读(15) 评论(0) 推荐(0) 编辑

2022年9月14日

vue2 props双向绑定

摘要： ###vue props 双向绑定常用：父组件 <Child :name='name' @update="v => name = v" /> 子组件 this.$emit('update', newValue) sync语法父组件 <Child :name.sync='name' /> 子组件阅读全文

posted @ 2022-09-14 11:28 前端之旅阅读(32) 评论(0) 推荐(0) 编辑

2022年8月18日

响应式reactive

摘要： reactive() 返回一个对象的响应式代理。一般ref绑定的是基本数据类型，如果绑定的是复杂型类型，ref会自动条用toReactive方法，相当于就是使用reactive() reactive绑定的是复杂型数据类型，会判断是为引用类型，如果不是会抛出警告响应式时深层转换的，影响所有嵌套属性阅读全文

posted @ 2022-08-18 08:48 前端之旅阅读(315) 评论(0) 推荐(0) 编辑

2022年8月8日

响应式ref

摘要： Ref() 接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，它们将被深层地解包 import { 阅读全文

posted @ 2022-08-08 23:19 前端之旅阅读(230) 评论(0) 推荐(0) 编辑