vue3尝鲜

时间:2021-6-12 作者:qvyue

    原谅我标题的不合时宜,只不过现在一直在做react开发,导致vue新知识的补充不及时,但是作为我的”母语“,还是要学一学看一看的

    bullet 首先映入眼帘的是根组件挂载方式的变化,不在是new Vue的天下了

vue3尝鲜
(至于说其他的全局组件、全局指令,和之前的使用方式区别不大)

    bullet 组合式API–setUp

            cdot 执行时机在组件创建前,即beforeCreate前

vue3尝鲜
vue3尝鲜

            cdot 返回值将挂载到组件实例,可以通过this直接使用,但是无法实时响应

vue3尝鲜
(点击button按钮将打印出在setup中定义的changeList函数,但是模板中的li并没有实时的增加2选项)

            cdot 借助ref函数让vue有权追踪

vue3尝鲜
(在框黄的位置我们发现value是一个被proxy代理的值)

            cdot 独立的”生命体”–生命周期、计算属性、侦听属性

vue3尝鲜
(在框黄的位置发现,setup内的生命周期和组件的生命周期是一致的)
vue3尝鲜

            cdot 参数

                参数一是props,需要注意的是如果想要使用es6的解构赋值语法的话,需要借助toRefs或toRef函数,前者用于确定值,后者则作用于可选值(官方文档说直接解构会导致props失去响应式,但是我这里测试没有发现,不知道是不是写的不对,代码如下

vue3尝鲜
vue3尝鲜
(或许是理解有偏差,props的更新是可以实时反应到子组件的)

                参数二是context上下文,它提供了slots、attrs和emit三个属性

                    emit这玩意儿和之前的this.$emit是一样的,都是父子组件通信手段

vue3尝鲜
vue3尝鲜

                slots也是向setup暴露的作用域插槽,这在setup中使用render函数时有用

vue3尝鲜
vue3尝鲜

    bullet 通信–不同的setup间

vue3尝鲜

readonly保证了数据的单项流动,ref使基本值响应,

reactive则将对象变为响应式)

vue3尝鲜
(helloword的子组件,app的孙组件)

    bullet ref

vue3尝鲜
(框红的两个地方必须一致)

    bullet Teleport–解决之前弹窗类组件在组件层级上脱离

    

       

内容

    

        


最后,如有问题欢迎指正探讨哦

若是不忙,点个赞呗~~

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。