提前熟悉Vue3.0 + Ts

3.0的目标

• 更小
• 更快
• 加强 TypeScript 支持
• 加强 API 设计一致性
• 提高自身可维护性
• 开放更多底层功能

什么是Hooks？

mixin的问题：

• 不同的mixin中的方法，属性可能会相互冲突（命名空间冲突）;
• mixin非常多时，会造成数据来源不清晰

HOC的问题：

• 需要在原组件上进行包裹或者嵌套，将会产生非常多的嵌套，调试起来不容易；
• props命名空间冲突（多个高级组件的props冲突）
• props 数据来源不清晰（不知道这个属性到底是那个高级组件传递的）
• 额外的组件实例消耗性能

作用域插槽：

没有this的烦恼，不需要通过this访问一些内容了，嗨皮

其实TypeScript并不是一门新的语言，它是 JavaScript 类型的超集，typeScript那并不是一个新语言，可以理解为加强JavaScript的buff，TypeScript最大的优势源于强大的类型系统，还有就是在编写代码的时候就可以检测出我们可能因为粗心造成的不必要的错误

为什么要学习TypeScript ?

• 未来趋势，目前来看发展，和应用趋势很快
• vue3.0发布后，基本就离不开ts了
• 使用 TypeScript 可以帮助我们防止在编写 JavaScript 代码时因为数据类型的转换造成的意想不到的错误。
  提前帮我们发现代码出现错的风险。
• 团队成员使用 JavaScript 时很容易瞎写，不受规范约束。
  但是如果使用TypeScript那大家都不得不遵守规范。
• TypeScript 紧跟 JavaScript 的发展，ES7 、ES8、ES9 相关语言的新特性都支持，比浏览器支持的速度更快。

什么样的项目需要TypeScript ？

• 团队多人开发的大项目
• 开源项目
• 企业对代码有高质量要求的项目

npm install -g @vue/cli
# OR
yarn global add @vue/cli

.
├── README.md
├── babel.config.js
├── package.json
├── postcss.config.js
├── public│
   ├── favicon.ico│
   └── index.html├── src│
   ├── App.vue│
   ├── assets│
   │   └── logo.png│
   ├── components│
   │   └── HelloWorld.vue│
   ├── main.ts│
   ├── router│
   │   └── index.ts│
   ├── shims-tsx.d.ts 允许你以 .tsx结尾的文件，在 Vue项目中编写 jsx代码│
   ├── shims-vue.d.ts 主要用于 TypeScript 识别 .vue 文件│
   ├── store│
   │   └── index.ts│
   └── views│
       ├── About.vue│
       └── Home.vue
├── tsconfig.json
└── yarn.lock

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    ...
  </div>
</template>
​<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
​@Componentexport default class HelloWorld extends Vue {
  @Prop() private msg!: string;
}
</script>

npm i @vue/composition-api -S

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

​Vue.use(VueCompositionApi)

<template>
  <div id="app">​
  </div>
</template>
<script lang="ts">
import { createComponent } from '@vue/composition-api'
export default createComponent({  ...})
</script>

实例：这是VueConf 2019尤大大在介绍的时候给出的一个例子，改成ts版本

<template>
  <div id="app">
    <div class="hooks-one">
      <h2>{{ msg }}</h2>
      <p>count is {{ count }}</p>
      <p>plusOne is {{ plusOne }}</p>
      <button @click="increment">count++</button>
    </div>
    <!-- <router-view/> -->
  </div>
</template>
<script lang="ts">
import { ref, computed, watch, onMounted, Ref, createComponent } from '@vue/composition-api'
​interface Props {
  name: string
}
​export default createComponent({
  props: {
    name: {
      type: String,
      default: 'ssss'
    }
  },
  components: {},
  setup (props: Props, context) {
    const count: Ref<number> = ref(0)
    // computed
    const plusOne = computed(() => count.value + 1)
    // method
    const increment = () => {
      count.value++
    }
    // watch
    watch(() => count.value * 2, val => {
      console.log(`count * 2 is ${val}`)
    })
    // 生命周期
    onMounted(() => {
      console.log('onMounted')
    })
    // expose bindings on render context
    return {
      count,
      plusOne,
      increment,
      msg: `hello ${props.name}`
    }
  }
})
</script>

详解：

setup

<template>
    <div id="app">
      {{ msg }}
      {{ count }}
    </div>
</template>

<script lang="ts">
import { createComponent } from '@vue/composition-api'
export default createComponent({
    props: {
      name: String
    },
    setup (props) {
      const count: Ref<number> = ref(0)
      return {
        msg: `hello ${props.name}`,
        count
      }
    }
})
</script>

组件 API（Composition API）

当前，我们使用所谓的 Options API 构建组件。为了向 Vue 组件添加逻辑，我们填充（可选）属性，例如 data、methods、computed等。这种方法的最大缺点是其本身并不是有效的 JavaScript 代码。你需要确切地知道模板中可以访问哪些属性以及 this 关键字的行为。在后台，Vue 编译器需要将此属性转换为工作代码。因此我们无法从自动建议或类型检查中受益。

reactive和ref

<template>
  <div id="app">
    <div class="hooks-one">
      {{state.double}}
      {{state.count}}
      <p>count is {{ count }}</p>
      <button @click="increment">count++</button>
    </div>
    <!-- <router-view/> -->
  </div>
</template>
<script lang="ts">
import { ref, computed, reactive, Ref, createComponent } from '@vue/composition-api'
​interface State {  count: number,  double: number}
​export default createComponent({  setup (props, context) {
    const count: Ref<number> = ref(0)
    const state: State = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    })
    // method
    const increment = () => {
      count.value++  // 需要.value获取，改变
      state.count++
    }
    // expose bindings on render context
    return {
      increment,
      state
    }
  }
})
</script>

watch & computed

生命周期

import { onMounted, onUpdated, onUnmounted, createComponent } from '@vue/composition-api';
export default createComponent({
      setup() {
            onMounted(() => {
                  console.log('mounted!');
            });
            onUpdated(() => {
                  console.log('updated!');
            });
            // destroyed 调整为 unmounted
            onUnmounted(() => {
                  console.log('unmounted!');
            });
      },
});

结语：

参考：