Vue3.0+TypeScript+Vite

事前准备

• 前端开发环境准备
• vite官网传送门
• vue3.0官网传送门
• vscode推荐插件：Vue Language Features、TypeScript Vue Plugin

项目创建

npm:

$ npm create vite
√ Project name: ... <project-name>
√ Select a framework: » Vue
√ Select a variant: » TypeScript

Scaffolding project in /path/to/<project-name>...

Done. Now run:

  cd <project-name>
  npm install    
  npm run dev 

项目结构

main.ts

在个人想法上，我觉得createApp()是vue应用的实例，createApp支持链式调用

App.vue：

推荐使用setup语法，早期ref sugar语法已废弃。

Composition API

声明：

ref函数，可将一些基本属性变成响应式，使用setup语法时，属性、及函数不需要export！

ref、reactive、computed

上图是reactive、ref和computed混合使用，至于效果，请各自复制下方代码体验

<script setup lang="ts">
import { ref, computed, reactive } from 'vue';

const zAge = ref(12)

const state = reactive({
  persons: [
    {
      name: 'zhangsan',
      age: computed(() => zAge)
    },
    {
      name: 'lisi',
      age: 20
    }
  ]
})
</script>

<template>
  <div id="app">
    <div v-for="(item, index) in state.persons" :key="index">
      {{ item.name }}是{{ item.age }}岁
    </div>
    <div>
      <h3>修改zhangsan的年龄</h3>
      <input type="text" v-model="zAge">
    </div>
  </div>
</template>

watch

<script setup lang="ts">
import { ref, computed, reactive, watch } from 'vue';

const zAge = ref(12)

const state = reactive({
  persons: [
    {
      name: 'zhangsan',
      age: computed(() => zAge)
    },
    {
      name: 'lisi',
      age: 20
    }
  ]
})

watch(zAge, (val, oldVal) => {
  console.log(`新值：${val}，旧值：${oldVal}`);
})
</script>

<template>
  <div id="app">
    <div v-for="(item, index) in state.persons" :key="index">
      {{ item.name }}是{{ item.age }}岁
    </div>
    <div>
      <h3>修改zhangsan的年龄</h3>
      <input type="text" v-model="zAge">
    </div>
  </div>
</template>

watchEffect

监听当前组件的响应式变量，一有变化则会执行闭包中的方法。
效果：

组件系统

全局注册

App.vue

main.ts

局部注册

App.vue

组件无需export，直接引用即可

setup

props

声明props对象，如果设置了必传参数，那么编辑器会报错。在watchEffect中，console.log(props.msg)是可以看到父组件传的值。props的默认值的设置与vue2的设置是一样的：

props的过滤在研究中。具体作用参考vue2.0 props作用

emit

这是使用emit函数的一些例子。

attrs

研究ing…

slots

研究ing…

vue指令

重点讲v-model，其他vue指令与2.0一样

v-model

上图是自定义输入框组件，v-model的接收以及如何更新v-model修饰的props。

vue3.0开始支持多个双向绑定的参数，这是vue2.0没有的，v-model后面没有跟其他属性的话，那么在这个组件内部它的默认值是modelValue，如果想更新v-model，那么就需要emits('update:modelValue', data)去更新v-model的默认值modelValue。那么v-model后面有属性的话(dragValue)，那么在这个组件内部它的值就是这个属性名(dragValue)，如果想更新v-model:dragValue的值，就需要emits('update:dragValue', data)去更新v-model自定义的值。

---

未完待续，不妨点下赞？