青岛网站制作专业,开发一个网站的流程,电脑自助建站,东莞英文网站制作1.provide和inject
2.响应式数据判断
3.Composition API的优势
4.新的组件
5.其他改变
一.provide和inject
作用#xff1a;实现祖与后代组件间通信
套路#xff1a;父组件有一个provide选项来提供数据#xff0c;后代组件有一个inject选项来开始使用这些数据
…1.provide和inject
2.响应式数据判断
3.Composition API的优势
4.新的组件
5.其他改变
一.provide和inject
作用实现祖与后代组件间通信
套路父组件有一个provide选项来提供数据后代组件有一个inject选项来开始使用这些数据
1在祖组件中 2后代组件中 3代码汇总
① App.vue
templatediv classapph3我是App(祖) {{ name }}--{{ price }}/h3Child //div
/templatescript
import { reactive, provide, toRefs } from vue
import Child from ./components/Child.vue
export default {name: App,components: { Child },setup () {let car reactive({name: 奔驰,price: 40})// 给自己的后代组件提供数据provide(car, car)return {...toRefs(car)}}
}
/scriptstyle
.app {background: gray;padding: 10px;
}
/style ② Child.vue
templatediv classchildh3我是Child组件(子)/h3Son/Son/div
/templatescript
import Son from ./Son.vue
export default {name: Child,components: {Son}
}
/script
style
.child {background: lightblue;padding: 10px;
}
/style
③ Son.vue
templatediv classsonh3我是Son组件(孙) {{ car.name }}--{{ car.price }}/h3/div
/templatescript
import { inject } from vue
export default {name: Son,setup () {let car inject(car)return {car}}
}
/scriptstyle
.son {background: orange;padding: 10px;
}
/style
二.响应式数据判断
isRef:检查一个值是否为一个ref对象isReactive:检查一个对象是否由reactive创建的响应式代理isReadonly:检查一个对象是否是由readonly创建的只读代理isProxy:检查一个对象是否是由reactive或者readonly方法创建的代理 三.Composition API的优势
① 传统optionAPI中新增或者修改一个需求就需要分别在data, methodscomputed里修改
不集中
② 组合式API更加优雅的组织我们的代码函数让相关功能的代码更加有序的组织在一起
四.新的组件
1Fragment
在Vue2中组件必须有一个根标签在Vue3中组件可以没有根标签内部会将多个标签包含在一个Fragment虚拟元素中好处减少标签层级减小内存占用
2Teleport
是一种能够将我们的组件html结构移动到指定位置的技术使用 代码
Child.vue
templatediv classchildh3我是Child组件/h3Son/Son/div
/templatescript
import Son from ./Son.vue
export default {name: Child,components: {Son}
}
/script
style
.child {background: lightblue;padding: 10px;
}
/style
Dialog.vue
templatedivbutton clickisShow true点我弹个窗/buttonteleport tobodydiv v-ifisShow classdialogdiv classmaskh3我是一个弹窗/h3h4一些内容/h4h4一些内容/h4h4一些内容/h4button clickisShow false关闭弹窗/button/div/div/teleport/div
/templatescript
import { ref } from vue
export default {name: Dialog,setup () {let isShow ref(false)return { isShow }}
}
/scriptstyle
.dialog {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;width: 300px;height: 300px;background-color: green;
}
.mask {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba(0, 0, 0, 0.5);
}
/style
Son.vue
templatediv classsonh3我是Son组件/h3Dialog //div
/templatescript
import { inject } from vue
import Dialog from ./Dialog.vue
export default {name: Son,components: { Dialog }
}
/scriptstyle
.son {background: orange;padding: 10px;
}
/style
App.vue
templatediv classapph3我是App/h3Child //div
/templatescript
import Child from ./components/Child.vue
export default {components: { Child },name: App
}
/scriptstyle
.app {background: gray;padding: 10px;
}
/style
3Suspense
等待异步组件时渲染一些额外内容让应用有更好的用户体验Suspense中提供两个插槽第一个default插槽中放加载的组件第二个fallback中放额外渲染的内容如果网速比较慢组件加载不出来的时候会展示额外渲染的内容 五.其他改变
① 全局API的转移
Vue2.x有很多全局API和配置Vue3.0对这些API做出了调整将全局的API即Vue.xxx调整到应用实例app上
2.x 全局 APIVue3.x 实例 API (app)Vue.config.xxxxapp.config.xxxxVue.config.productionTip移除Vue.componentapp.componentVue.directiveapp.directiveVue.mixinapp.mixinVue.useapp.useVue.prototypeapp.config.globalProperties
② 其他改变
data选项影适中被声明为一个函数过渡类名的更改
- - Vue2.x写法css.v-enter,.v-leave-to {opacity: 0;}.v-leave,.v-enter-to {opacity: 1;}- Vue3.x写法css.v-enter-from,.v-leave-to {opacity: 0;}.v-leave-from,.v-enter-to {opacity: 1;}- 移除keyCode作为 v-on 的修饰符同时也不再支持config.keyCodes 移除v-on.native修饰符
- - 父组件中绑定事件vuemy-componentv-on:closehandleComponentEventv-on:clickhandleNativeClickEvent/- 子组件中声明自定义事件vuescriptexport default {emits: [close]}/script-
移除过滤器filter 过滤器虽然这看起来很方便但它需要一个自定义语法打破大括号内表达式是 “只是 JavaScript” 的假设这不仅有学习成本而且有实现成本建议用方法调用或计算属性去替换过滤器
