详解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 相关文章推荐
浅析VUE防抖与节流
Nov 24 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 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
php 操作excel文件的方法小结
2009/12/31 PHP
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
php curl_init函数用法
2014/01/31 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
python版简单工厂模式
2017/10/16 Python
Python continue继续循环用法总结
2018/06/10 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
python中逻辑与或(and、or)和按位与或异或(&amp;、|、^)区别
2020/08/05 Python
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
SQL注入攻击的种类有哪些
2013/12/30 面试题
init进程的作用
2012/04/12 面试题
绿化先进工作者事迹材料
2014/01/30 职场文书
医科大学毕业生自荐信
2014/02/03 职场文书
函授自我鉴定范文
2014/02/06 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
同事欢送会致辞
2015/07/31 职场文书