Vue3.0 + TypeScript + Vite
- Vue3.0+TypeScript+Vite
- 项目创建(推荐使用yarn包管理器)
- 项目结构
- main.ts
- App.vue:
- Composition API
- ref、reactive、computed
- watch
- watchEffect
- 组件系统
- 全局注册
- 局部注册
- setup
- props
- emit
- attrs
- slots
- vue指令
- v-model
Vue3.0+TypeScript+Vite
项目创建(推荐使用yarn包管理器)
yarn:
$ yarn create vite <project-name> --template=vue-ts
$ cd <project-name>
$ yarn
$ yarn 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自定义的值。
未完待续,不妨点下赞?