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

持续创作,加速成长!这是我参与「日新计划 6 月更文挑战」的第2天,点击查看活动详情

前言

阅读这篇文章你将学到:

  1. 装饰器模式的大量运用
  2. this的灵活运用
  3. vue jsx tsx的写法

从vue2跨越到vue3是一大步,而在跨越之前社区就产生了很多解决方案:例如template替换为render函数、还有的直接使用j字符串逆序输出sx语法,更有甚者直接使用类组件的方式来进行编码,与Reaelementary是什么意思ct类组件非初始化电脑的后果常相似;今天我们就来讲一讲使用类组件的方式来写vue,并且把我遇到的坑都给大家分享初始化电脑的后果出来

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

Component

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

@Component
expoort default class HelloWorld extends Vue{ }

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

@Component({
    // 定义组件
    components:{
        ABC
    },
    computed:{
    },
    created(){
    }
})
expoort default class HelloWorld extends Vue{ }

Data

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

@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的问题,我们如果初始化一个空对象,那么后elementary是什么意思面新增属性的话,也是非响应式属性

总结初始化英文一下: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、destro初始化电脑时出现问题yed、render,值得注element滑板意的是这个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 undefine字符常量d”

为什么会报这个错误呢,肯定是this指向不正确,然后我们去函数内部打印thi数组和链表的区别s,发现打印不出来,应该是在编译阶段直接给报错了,这数组初始化里的原因我们后面章数组的定义节再讲,总之我们避免在类组件中写箭头函数,这和我们在options API中element滑板不能写箭头函elementary数是一样字符间距在哪里设置的;同样的我们分析一下renderMap它在vue中也会报错,第一个a属性中箭头函数的th初始化sdk什么意思is指向是正确的但是我们无法让编译正常通过,因此我们可以使用this.字符串逆序输出$createElement代替jsx;而b属性中的this指向了renderMap这个对象,肯定是报错的无法挽救;

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

slots

类组件中的s字符间距加宽2磅怎么设置lots比templ字符是什么ate多一种表达方式,就是直接写在组件的属性中,在传统的vue2初始化失败是怎么解决组件中我们是无法通过一个props来渲染一个组件或者DOM节点的,但是数组公式class组件能够实现这一点

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

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

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

发表评论

提供最优质的资源集合

立即查看 了解详情