Vue+Ts搭建项目(一)：前置知识

Vue组件的几种形式

在vue+typescript中我们可以使用三种形式定义组件

类组件
扩展组件
函数组件

类组件

是我们在ts项目中使用频率最高的组件，它可以使用我们的装饰器，使组件完美的使用typescript.

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({
  name: 'Demo'
})
export default class extends Vue{}
</script>

扩展组件

和平时使用vue的方式完全相同，但是不能使用装饰器。

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({})
</script>

函数组件

如果使用过react的话会知道react中有函数式组件，并且性能相比于其他组件要好一点但是没有生命周期。

<template functional>
  <div>
    <h3>函数型组件</h3>
  </div>
</template>

了解类组件的书写形式

ts项目需要借助vue-property-decorator,该库完全依赖于vue-class-component，提供了下面几种装饰符：

@Prop 参数传递
@Watch 监听数据
@Ref 组件的ref
@Emit 指定事件emit，可以使用此修饰符，也可以直接使用 this.$emit()
@Mixins mixin 注入
@Model v-model
@Component

@Component --> Component

@Component 装饰器可以接收一个对象作为参数，可以在对象中声明 components ，filters，directives等未提供装饰器的选项

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import HeaderComponent from '@/components/HeaderComponent.vue'
import ResizeMixin from "../mixins"
@Component({
  name: 'Demo',
  components: { // 组件
    HeaderComponent
  },
  directives: { // 局部指令
    test(el: HTMLElement, binding) {
      console.log(el, binding);
    }
  },
  filters: { // 局部过滤
    addOne(num: number) {
      return num + 1;
    }
  },
  mixins: [ResizeMixin],
})
export default class extends Vue{}
</script>

@Prop --> 数据接受参数

@Prop() str1!: string; // 必传
@Prop() str2: string | undefined; // 非必传
@Prop({ default: "默认值" }) str3: string | undefined;

data --> 数据绑定

private name = "张三";
private age = 18;
private userInfo: UserInfo = {
  name: "李四",
  age: 39
};

methods --> 方法

private addAge() {
  this.btn.style.background = "yellow";
  this.age += 1;
}

computed --> 计算属性

get initUser() {
  return "计算后的age" + this.age;
}

@Watch --> 监听数据的变化

interface UserInfo {
  name: string;
  age: number;
}
@Watch("age")
handelChangeAge(newVal: number, oldVal: number) {
console.log("新数据" + newVal, "老数据" + oldVal);
}
// 深度监听
@Watch("userInfo", { deep: true, immediate: false })
handelChangeUserInfo(newVal: UserInfo, oldVal: UserInfo) {
console.log("新数据" + newVal, "老数据" + oldVal);
}

@Ref --> 获取元素

<button type="button" ref="btn" @click="addAge" class="btn">
  测试ref
</button>
@Ref("btn") btn!: HTMLButtonElement;
addAge() {
this.btn.style.background = "yellow";
}

@Emit --> 发布事件

// Child
<button @click="addStrClick">addStrClick</button>
<button @click="addStrClick2('1')">addStrClick</button>
@Emit()
addStrClick() {
return "1";
}
@Emit()
addStrClick2(str) {
return str + 1;
}

// father
<Child @addStrClick="***" @addStrClick2="***" />

生命周期

created() {
  console.log("created");
}
mounted() {
  console.log("mounted");
}

参考文献

Typescript+Vue大型项目构建+详细讲解

Vue+Ts搭建项目(一)： 前置知识