vue3.0基础
不明真相的围观脆皮炸鸡
这个作者很懒,什么都没留下…
展开
-
vue3.0之Global API Change-全局API修改
vue3入口文件,采用api为createApp,然后把创建出来的对象mount到Dom节点上vue2的写法:从vue导出了一个全局的对象,然后在上面进行了一系列的配置,比如use、mixin等一系列方法,然后再新建vue的实例,调用$mount方法挂载到Dom节点,我们发现vue2的全局配置在一定程度上修改了vue对象一系列的属性或者说是全局状态,这些操作都是对vue对象操作的,在一定程度上会有一些问题问题一:在单元测试中,全局配置非常容易污染全局环境。问题二:在不同的apps中,共享一份有不同原创 2021-04-10 14:54:44 · 428 阅读 · 0 评论 -
vue3.0之Suspense内置组件
使用Suspense注意点:(1)解决异步请求的困境。(2)Suspense是Vue3推出的一个内置的特殊组件,有两个template slot,刚开始会渲染一个fallback内容,直到达到某个条件以后才会渲染正式的内容。(3)如果使用Suspense,在setup( )中需要返回一个promise,而不是直接返回一个对象。简单的Demo示例AsyncShow.vue (子组件)<template> <h1>{{result}}</h1></te原创 2021-04-10 13:27:38 · 577 阅读 · 0 评论 -
vue3.0之Teleport
为什么使用Teleport新的特性呢?因为有时候用组件来表示一切界面中发生的逻辑,不过有些特例处理起来比较麻烦,比如在某个组件渲染的时候,在某种条件下需要显示一个全局的对话框dialog或者是modal组件,弹出一个浮层让用户来完成一些确定和取消的操作。一般的做法如下:会造成的问题:(1)我们写一个这样的dialog组件那么在渲染的时候就会将dialog渲染产生的HTML存在在这上面,变成父子结构的形式,造成dialog组件被嵌套的非常深,对于对话框来说,从用户感知的角度应该是一个独立的组件,通常应原创 2021-04-07 20:45:39 · 355 阅读 · 0 评论 -
vue3.0之setup()函数配合watch侦听
setup()函数是同beforecreate和created函数差不多一起运行的,而且只执行了一次,所以第一次执行了,而更新的时候不会触发,这时候就需要使用watch了例子:使用watch按钮,每次点击网页title进行更改信息。<template> <div id="app"> <!-- <img alt="Vue logo" src="./assets/logo.png" /> --> <h1>{{greetings}原创 2021-04-07 19:18:57 · 4472 阅读 · 0 评论 -
Vue3.0与Vue2.0的v-model的使用区别
v-model 升级在使用 Vue 3 之前就了解到 v-model 发生了很大的变化, 使用过了之后才真正的 get 到这些变化, 我们先纵观一下发生了哪些变化, 然后再针对的说一下如何使用:变更:在自定义组件上使用v-model时, 属性以及事件的默认名称变了变更:v-bind的.sync修饰符在 Vue 3 中又被去掉了, 合并到了v-model里新增:同一组件可以同时设置多个 v-model新增:开发者可以自定义 v-model修饰符有点懵?别着急,往下看 在 Vue2 中, 在组件上使原创 2021-04-06 09:05:04 · 2259 阅读 · 0 评论