首页 前端 Vue.js 正文

你可能不知道vue还能这样写(一)

前言

阅读这篇文章你将学到:

  1. 装饰器模式的大量运用

  2. this的灵活运用

  3. Vue.jsx tsx的写法

从vue2跨越到vue3是一大步,而在跨越之前社区就产生了很多解决方案:例如template替换为render函数、还有的直接使用jsx语法,更有甚者直接使用类组件的方式来进行编码,与React类组件非常相似;今天我们就来讲一讲使用类组件的方式来写vue,并且把我遇到的坑都给大家分享出来

先安装一下vue-class-component,开始我们今天的旅行

Component

Component:类组件的基石,必须调用这个函数才能使用类组件,同时需要扩展Vue这个类

@Component
expoort default class HelloWorld extends Vue{ }

Component函数的参数类型:VueClass,也就是说它的参数就是Option API中的options,既然我们要使用类组件的方式那么我们一般不主动去调用Component函数,而是在类组件内部去定义

@Component({
    // 定义组件
    components:{
        ABC
    },
    computed:{

    },
    created(){

    }
})
expoort default class HelloWorld extends Vue{ }

Data

在类组件上怎么定义data呢?就直接利用类的属性去定义就可以了

@Component
expoort default class HelloWorld extends Vue{
     dataSource=[] // 定义一个数组
     type=0        //定义一个数字
     string=''     //定义一个字符串
}

如果需要设置初始空值,不能直接把属性设置为undefined,这样的话是非响应式属性;可以设置为null或者使用data来声明

expoort default class HelloWorld extends Vue{
    // 错误的设置方式
     undefined = undefined
     undefined;
     // 应该设置为null或者使用data hook
     null = null // 这个属性是响应式属性
     data(){
         return {
             // 也是响应式属性
             undefined:undefined
         }
     }
}

注意由于vue2的问题,我们如果初始化一个空对象,那么后面新增属性的话,也是非响应式属性

总结一下:vue class组件中定义一个响应式属性需要把初始值设置为非undefined的值,如果只是临时存储一个对象则可以不给初始值,这样就不会进行响应式处理,节省了内存

Computed

Computed是直接使用get或者set访问器来进行设置的,但是需要借助一个data来进行值的修改,class组件的set访问器不支持返回值,与普通对象的set访问器不同,这里需要格外注意

expoort default class HelloWorld extends Vue{
    name="Hello"
    get myName(){
        return this.name + "World"
    }
    set myName(val){
        this.name = val
    }
}

Hooks

生命周期函数与React class组件类似,例如mounted、created、destroyed、render,值得注意的是这个render函数其实是this.$createElement的语法糖,在编译阶段会转化为后者,正是由于这一点,我们需要格外注意这个render函数的使用,现在我们来和React组件做一个比较:

class ReactComp extends Component{
    renderSection = ()=>{
        reutrn <section>123</section>
    }
    render(){
        return <div>{this.renderSection()}</div>
    }
}

class VueComp extends Vue{
    renderSection = ()=>{
        reutrn <section  data={()=> <div>a</div>}>123</section>
    }
    renderMap={
        a:()=>{
            return <div>a</div>
        },
        b(){
            return <div>b</div>
        }
    }
    render(){
        return <div data={this.renderMap}>{this.renderSection()}
        </div>
    }
}

最后Vue组件报错:“TypeError: Cannot read property '$createElement' of undefined”

为什么会报这个错误呢,肯定是this指向不正确,然后我们去函数内部打印this,发现打印不出来,应该是在编译阶段直接给报错了,这里的原因我们后面章节再讲,总之我们避免在类组件中写箭头函数,这和我们在options API中不能写箭头函数是一样的;同样的我们分析一下renderMap它在vue中也会报错,第一个a属性中箭头函数的this指向是正确的但是我们无法让编译正常通过,因此我们可以使用this.$createElement代替jsx;而b属性中的this指向了renderMap这个对象,肯定是报错的无法挽救;

最后我们在vue组件中尽量不要把组件属性提取出来而是直接在组件上写:就像renderSection中section的data属性一样

slots

类组件中的slots比template多一种表达方式,就是直接写在组件的属性中,在传统的vue2组件中我们是无法通过一个props来渲染一个组件或者DOM节点的,但是class组件能够实现这一点

// class组件可以使用以下两种方式
<ClassComp data={<Props/>}/>
// template只能使用slots
<ClassComp>
    <Props/>
</ClassComp>

scoped slots怎么定义?其实就是我们上面所说的第一种方式,我们传递一个函数就可以了

总结:我们今天系统学习了vue类组件的写法,vue类组件有利于ts类型的声明,但是需要我们有深厚的基本功,如果我们连this都搞不懂那么一定用不好这个类组件

原文:https://juejin.cn/post/7101831098807615496
打赏
海报

本文转载自互联网,旨在分享有价值的内容,文章如有侵权请联系删除,部分文章如未署名作者来源请联系我们及时备注,感谢您的支持。

转载请注明本文地址:https://www.shouxicto.com/article/5466.html

相关推荐

Vue3 新特性

Vue3 新特性

   前言    阅读这篇文章你将学到:                        装饰器模式的大量...

Vue.js 2022.06.01 0 728

50+Vue经典面试题源码级详解(24)

   Vue 3.0的设计目标是什么?做了哪些优化?    分析    还是问新特性,陈述典型新特性,分析其给你带来的变化即可。    思路    从以...

Vue.js 2022.06.01 0 712

发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
支付宝
微信
赞助本站