详解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自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
vue+openlayers绘制省市边界线
Dec 24 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
详解Vue router路由
Nov 20 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
vue中data里面的数据相互使用方式
Jun 05 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 删除cookie和浏览器重定向
2009/03/16 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
js事件委托和事件代理案例分享
2017/07/25 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
python实现kMeans算法
2017/12/21 Python
python模块之paramiko实例代码
2018/01/31 Python
python各类经纬度转换的实例代码
2019/08/08 Python
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
私有程序集与共享程序集有什么区别
2013/04/05 面试题
医学类导师推荐信范文
2013/11/19 职场文书
邮政员工辞职信
2014/01/16 职场文书
股份合作协议书
2014/04/12 职场文书
安全生产月活动总结
2014/05/04 职场文书
师范生自荐信模板
2014/05/28 职场文书
明确岗位职责
2015/02/14 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
pandas取dataframe特定行列的实现方法
2021/05/24 Python
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs
源码安装apache脚本部署过程详解
2022/09/23 Servers