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

Vue组件的几种形式

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

• 类组件

• 扩展组件

• 函数组件

类组件

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

扩展组件

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

函数组件

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

了解类组件的书写形式

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等未提供装饰器的选项

@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 --> 获取元素

  测试ref

@Ref("btn") btn!: HTMLButtonElement;

addAge() { this.btn.style.background = "yellow"; } 

@Emit --> 发布事件

// Child
addStrClick
addStrClick

@Emit() addStrClick() { return "1"; } @Emit() addStrClick2(str) { return str + 1; } 复制代码

 

// father

生命周期

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