详解Vue3.0 + TypeScript + Vite初体验


Posted in Vue.js onFebruary 22, 2021

项目创建

npm:

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

or yarn:

$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

项目结构

详解Vue3.0 + TypeScript + Vite初体验

main.js

详解Vue3.0 + TypeScript + Vite初体验

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

App.vue:

详解Vue3.0 + TypeScript + Vite初体验

这是兼容vue2.0的语法,下面是vue3.0 rfc写法(还处于实验性阶段)。
rfc官方说明

setup

data

详解Vue3.0 + TypeScript + Vite初体验

setup是结合了vue2.0的created生命周期函数和data还有methods(后面会提到)

可直接 export 属性(data)和方法(methods)

详解Vue3.0 + TypeScript + Vite初体验

可以看出现在的name不是响应式的,后面会介绍响应式

methods

详解Vue3.0 + TypeScript + Vite初体验

methods也是跟data一样,直接export

效果:

详解Vue3.0 + TypeScript + Vite初体验

Composition API

ref

声明:

详解Vue3.0 + TypeScript + Vite初体验

Ref可将一些基本属性变成响应式

详解Vue3.0 + TypeScript + Vite初体验

reactive

详解Vue3.0 + TypeScript + Vite初体验

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

<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>

<script lang="ts" setup="props, {emit}">
import { reactive, ref } from 'vue'
export const zAge = ref(12)
export const state = reactive({
 persons: [
 {
  name: 'zhangsan',
  age: zAge
 },
 {
  name: 'lisi',
  age: 20
 }
 ]
})
</script>

computed

声明:

详解Vue3.0 + TypeScript + Vite初体验

效果:

详解Vue3.0 + TypeScript + Vite初体验

watchEffect

声明:

详解Vue3.0 + TypeScript + Vite初体验

效果:

详解Vue3.0 + TypeScript + Vite初体验

组件系统

全局注册

App.vue

详解Vue3.0 + TypeScript + Vite初体验

main.js

详解Vue3.0 + TypeScript + Vite初体验

局部注册

App.vue

详解Vue3.0 + TypeScript + Vite初体验

setup

props

详解Vue3.0 + TypeScript + Vite初体验

声明props对象,在watchEffect中,console.log(props.msg)是可以看到父组件传的值。props的默认值和过滤在研究中。具体作用参考vue2.0 props作用

context

详解Vue3.0 + TypeScript + Vite初体验

组件上下文

emit

详解Vue3.0 + TypeScript + Vite初体验

声明emit函数,在setup="props, { emit }"要写上emit,不然会报错,具体作用参考vue2.0 emit作用。

详解Vue3.0 + TypeScript + Vite初体验

详解Vue3.0 + TypeScript + Vite初体验

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

attrs

研究ing…

slots

研究ing…

vue指令

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

v-model

详解Vue3.0 + TypeScript + Vite初体验

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

更多的用法参考官方的文档:https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md

到此这篇关于详解Vue3.0 + TypeScript + Vite初体验的文章就介绍到这了,更多相关Vue3.0 TypeScript Vite内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vuex的数据渲染与修改浅析
Nov 26 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
vue使用echarts实现折线图
Mar 21 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
vue特效之翻牌动画
Apr 20 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 #Vue.js
Vue实现todo应用的示例
Feb 20 #Vue.js
基于vue的video播放器的实现示例
Feb 19 #Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 #Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 #Vue.js
Vue如何实现变量表达式选择器
Feb 18 #Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 #Vue.js
You might like
Yii rules常用规则示例
2016/03/15 PHP
JavaScript静态的动态
2006/09/18 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
[03:52]显微镜下的DOTA2第三期——英雄在无聊的时候干什么
2014/06/20 DOTA
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
大学竞选班长演讲稿
2014/04/24 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
代办委托书怎么写
2014/08/01 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
建党伟业的观后感
2015/06/01 职场文书
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技