vue.3.0 dom赋值_Vue 3.0 快速入门
作为前端开发者,这几天想必大家都看到了Vue3.0的beta版新闻了,是的,尤大大在4.17号微博晒出了Vue3.0的beta链接,不少FEer开始兴奋,不过也有不少其它声音:『我学不动了』、『这不就是React』、『啥时候出正式版』;
Vue3.0-beta链接:https://github.com/vuejs/vue-next#status-beta
那么首先,我们先简单看一下Vue发布版本的过程:Alpha - Beta - RC - 正式
所以,从截图来看,还会经历RC阶段才会有正式版本能用,大家不要过于着急,目前尤大正在全力开发配套基础功能,比如脚手架、vue-router、以及生态插件等;
Vue3.0设计目标
- 更小
- 全局 API 和内置组件 / 功能支持 tree-shaking
- 常驻的代码尺寸控制在 10kb gzipped 上下
- 更快
- 基于 Proxy 的变动侦测,性能整体优于 getter / setter
- Virtual DOM 重构
- 编译器架构重构,更多的编译时优化
- 加强API设计一致性
- 加强TypeScript支持
- 提高自身可维护性
- 代码采用 monorepo 结构,内部分层更清晰
- TypeScript 使得外部贡献者更有信心做改动
- 开放更多底层功能
对于我们开发者来讲,最关心的还是它的用法,实际上这块变化非常大。虽然目前是beta版本,但我们依然可以尝鲜,在本地创建Vue项目,并做一做Demo;
一、创建项目
// 先升级vue-cli到4.x版本cnpm install -g @vue/cli// 通过脚手架创建项目,一路回车vue create vue3.0
注:这一步实际上用的依然是2.x的版本
二、升级2.6到3.0beta版本
// 安装完vue/cli以后,可以使用vue add添加插件// 目前3.0对应的是vue-next项目vue add vue-next
安装完vue-next以后,我们就发现本地项目已经升级到了3.0. 打开main.js如图:
左侧目录结构没有太大变化,main的语法却大不一样了;
前面我们提到Vue3.0更小,因为它支持Tree-Shaking,可以把每一个用到的API都抽取出来,通过上图我们发现,可以只解构出一个createApp函数,相比2.0简化了很多。
三、LifeCycle介绍(Hooks)
Vue3.0中,生命周期方法已经发生了很大变化,接下来我们对比一下:
四、Composition API介绍
实际上,起初定义的是Vue-Function-API,后经过社区意见收集,更名为Vue-Composition-API.
接下来,我们介绍几个变化大的Composition API:
- reactive API
- ref API
- watch API变化
- computed API变化
- 生命周期钩子变化(参考上面)
- TypeScript和JSX支持(暂时忽略)
reactive
作用:创建响应式对象,非包装对象,可以认为是模板中的状态。
它本身一种Hooks能力,用过React Hook的,实际上就等同于useState();大家估计很好奇,为什么叫reactive? 让人莫名有一种你再抄袭React的感觉!
接下来,上硬菜:
// 打开 App.vue,删除多余代码
{{title.name}}
{{title.name}}
// 此处可并列多个div,不再要求一个根元素了
import { reactive } from 'vue'export default { name: 'App', setup(){ const title = reactive({ name:'欢迎学习Vue3.0' }) return { title } }}#app { text-align: center; color: #2c3e50; margin-top: 60px;}
页面效果图:
Ref
作用:创建一个包装式对象,含有一个响应式属性value。
它和reactive的差别,就是前者没有包装属性value
接下来,上硬菜:
<div id="app"> <h1>{{title.name}}h1> <div>{{user}}div> div></template>import { reactive,ref } from 'vue'export default { name: 'App', setup(){ const title = reactive({ name:'欢迎学习Vue3.0' }) const user = ref('河畔一角'); //必须通过value赋值,且模板中直接使用user user.value = '河畔老师' return { title ,user } }}script><style>#app { text-align: center; color: #2c3e50; margin-top: 60px;}style>
效果图如下:
事件处理
实际上这个地方有一些小误区,Vue3.0依然可以继续使用2.x的语法,data、methods、mounted依然可以使用,我们这儿主要针对Composition API做讲解,可以翻译成新增的组合API.
如果不用methods,那事件处理该怎么调用方法?
上硬菜:
{{title.name}}
{{title.name}}
{{user}}
修改名称
import { reactive,ref } from 'vue'export default { name: 'App', setup(){ const title = reactive({ name:'欢迎学习Vue3.0' })
const user = ref('河畔一角'); const updateUser = ()=>{ //如果需要修改值,可通过value user.value = '河畔老师' } return { title , user, updateUser } }}#app { text-align: center; color: #2c3e50; margin-top: 60px;}
效果图:
onMounted/computed
作用:新周期函数和新计算函数
上硬菜:
{{title.name}}
{{title.name}}
{{user}}
修改名称
当前count:{{computedCount}}
修改count
import { reactive,ref,onMounted,computed } from 'vue'export default { name: 'App', setup(){ const title = reactive({ name:'欢迎学习Vue3.0' }) const user = ref('河畔一角'); //如果需要修改值,可通过value const updateUser = ()=>{ user.value = '河畔老师' } //生命周期方法 onMounted(()=>{ console.log('init mounted...') }) // 初始化count值 const count = ref(0); const increment = ()=>{ count.value++ } // 调用计算属性函数Hook const computedCount=computed(()=>count.value*10) return { title , user, updateUser,count,increment,computedCount } }}#app { text-align: center; color: #2c3e50; margin-top: 60px;}
效果图:
经过以上几个API讲解,相信大家开始越来越激动了,语法新颖,简洁凝炼,但大家需要有一个过渡期,刚开始肯定会很陌生;
实际上用法远不止这些,包括父子传递、支持jsx语法等,我们这儿不做一一介绍了,大家可以自己通过第三方资料整理,了解更多Vue3.0的语法;
给大家提供几个官网的API文档:
https://composition-api.vuejs.org/#summary
https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api/
尤大直播回放地址:
https://live.bilibili.com/record/R14x411c7rW
上述源码已经上传Github: https://github.com/JackySoft/vue3.0-demo
温馨提示:目前Vue3.0是会兼容大部分2.x的语法,实际上主要的变化,在上面的Vue3.0设计目标里面已经列出,我们主要的学习成本可能就在Composition API这块,新增了很多组合API,它本身不依赖this指针,方便我们对逻辑做抽取封装。
不知道大家是否能看懂这个图!我上面提到的API文档会有详细介绍。
vue.3.0 dom赋值_Vue 3.0 快速入门相关推荐
- vue 图形化设计工具_Vue: Vue-CLI3.0 创建项目
真实的开始需要的:开发服务器: 需要http/https协议访问 BaBel: es6转es5,兼容2015年6月之前的浏览器 postcss less sass: 开发高效 esLint: 协作开发 ...
- vue.3.0 dom赋值_Vue3.0的几大新特性
今天写这篇文章主要是为了给自己重温下Vue3.0的新特性,也为了给各位前端朋友做个简单的介绍.目前vue3的开发已经在Alpha阶段,之后应该会有Beta版本,源码地址在:https://github ...
- vc6.0 debug 比 release 快??_快速入门快应用——quickapp构建与发布
本期作者:狗蛋404实验室 伴随着我司快应用审核通过.上线,此处应该有一篇快应用开发经验分享.我司开发的快应用刚好涉及到音频.视频.Feed流业务,下面分享一下我在开发中遇到的问题. 项目搭建 hap ...
- 【0基础强力推荐】R语言快速入门
文章目录 前言 一.R语言入门 1.基本语法 2.R包的安装 3.R包的使用 4.获取帮助 5.内置数据集 6.向量 7.向量索引 8.向量运算 9.矩阵 10.因子 11.数据框 12.缺失值 13 ...
- Vue笔记(适合后端人员开发的快速入门)
本文是参照B站up主'编程不良人'整理的笔记 目录 1. Vue 引言 2. Vue入门 2.1 下载Vuejs 2.2 Vue第一个入门应用 3. v-text和v-html 3.1 v-text ...
- 零基础快速入门SpringBoot2.0教程 (三)
一.SpringBoot Starter讲解 简介:介绍什么是SpringBoot Starter和主要作用 1.官网地址:https://docs.spring.io/spring-boot/doc ...
- 《iOS9开发快速入门》——第2章,第2.1节Xcode 7.0的新特性
本节书摘来自异步社区<iOS9开发快速入门>一书中的第2章,第2.1节Xcode 7.0的新特性,作者 刘丽霞 , 邱晓华,更多章节内容可以访问云栖社区"异步社区"公众 ...
- 【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
- java 小球抛物线_vue 2.0 购物车小球抛物线
备注:此项目模仿 饿了吗.我用的是最新的Vue, 视频上的一些写法已经被废弃了. 布局代码 v-for="ball in balls" @before-enter="be ...
最新文章
- linux动态库注册函数,Linux动态库函数的详解
- nlopt 二次优化
- 121. Leetcode 5. 最长回文子串 (动态规划-子序列问题)
- java网络编程之Socket编程
- python中用于获取当前目录的是_python中获得当前目录和上级目录的实现方法
- 转]从一个男人关注的事情上 可以看出他的修养和抱负
- vs2015软件系统开源_特别版:2015年开源新闻
- 来看看Python炫酷的颜色输出与进度条打印
- 安拆网:脚手架钢管规格及施工要求
- 发动机冒黑烟_发动机总冒黑烟 用这招解决最快!
- editplus远程连接云服务器
- 航程门业:木门企业可搭上移动客户端班车 获得客户
- Airbnb产品运营数据分析
- HTMLCSS常见面试题
- 笔记-EXCEL 周报制作
- python做运动控制_用 Python 写一个跟踪运动对象系统
- One-Stage Visual Grounding via Semantic-Aware Feature Filter
- 手工电动木偶,3D模型。
- Python实现可视化大屏数据
- 【年度总结】— 向前一步
热门文章
- MySQL------报错Access denied for user ‘root‘@‘localhost‘ (using password:NO)解决方法
- Spark推荐系列之Word2vec算法介绍、实现和应用说明(附代码)
- 详细解读!Isotropic Remeshing的详细介绍与实现
- Python实战从入门到精通第四讲——数据结构与算法2之实现一个优先级队列
- python摄像头跟随人脸_opencv-python 学习笔记2:实现目光跟随(又叫人脸跟随)
- 源码包安装mysql_源码包安装MySQL
- wps表格数字和名字分开_WPS表格怎么把一串数字用句号分?
- 独立站需要ERP系统吗?
- Leetcode每日一题:424.longest-repeating-character-replacement(替换后的最长重复字符)
- Algorithm:贪心策略之区间调度问题