Vue3.0新特性及使用方法

1.1创建Vue3.0项目
通过脚手架 vite 安装：
npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue3
Vite目前仅支持 Vue 3.x以上，这意味着你不能使用不兼容Vue 3的组件库
目前基于Vue的第三方组件库兼容Vue 3的情况：
Ant Design Vue：支持 Vue 3.0 的 2.0.0 测试版已发布
ElementUI：尚未支持
MintUI：尚未支持
iView(ViewUI)：尚未支持
Vue2-leaflet：很明显不支持
通过脚手架 vue-cli 安装：
首先全局更新最新版的 Vue CLI，4.5.0以上版本支持 Vue。

1.2Vue2.x 项目升级为 Vue3.x项目
最简单的方法，就是使用vue-cli 3.0，创建一个新的项目，然后将原有的项目源码拷到新的项目中。
Vue3中兼容Vue2中定义组件的写法，所以只需要将入口文件 main.js 中创建Vue实例的代码替换为使用Vue3中新引入的 createApp方法，来创建应用程序实例的方式即可。
Vue 2 main.js：
import Vue from ‘vue’import App from ‘./App.vue’
new Vue({
render: h => h(App),}).$mount(’#app’)
Vue 3 main.js：
import { createApp } from ‘vue’import App from ‘./App.vue’
createApp(App).mount(’#app’)
1.3值得注意的Vue3 新特性
Composition API(组合 API)：
当组件变得越来越大时，逻辑关注点的列表也会增长。这可能会导致组件难以阅读和理解，且碎片化使得理解和维护复杂组件变得困难。选项的分离掩盖了潜在的逻辑问题。此外，在处理单个逻辑关注点时，我们必须不断地“跳转”相关代码的选项块。
如果能够将与同一个逻辑关注点相关的代码配置在一起会更好，于是 Composition API 应运而生。
使用Composition api的位置被称为setup
setup组件选项
setup 组件选项在创建组件之前执行，一旦 props 被解析，并充当合成 API 的入口点。
注意：由于在执行 setup 时尚未创建组件实例，因此在 setup 选项中没有 this。这意味着，除了 props 之外，你将无法访问组件中声明的任何属性——本地状态、计算属性或方法。
// src/components/UserRepositories.vue setup function
import { fetchUserRepositories } from ‘@/api/repositories’
import { ref, onMounted } from ‘vue’
// in our component
export default {
setup (props) {
const repositories = ref([]) // 定义一个变量
const getUserRepositories = async () => { // 定义一个方法
repositories.value = await fetchUserRepositories(props.user)
}

  onMounted(getUserRepositories) // 生命周期钩子 当实例mounted后调用getUserRepositories方法return {repositories, // 返回一个datagetUserRepositories // 返回一个method}
}}

单文件组件 Composition API 语法糖 (

},
}// 使用了 Composition API 语法糖：

export const count = ref(0)
export const inc = () => count.value++
1.3.1.1单文件组件状态驱动的 CSS 变量 (

hello

1.3.1.2单文件组件

/* targeting slot content /
::v-slotted(.foo) {}
/ shorthand */
:slotted(.foo) {}

/* one-off global rule /
::v-global(.foo) {}
/ shorthand */
:global(.foo) {}
1.4Vue 3的重大改变
1.4.1.1引入createApp
背景：
从技术上讲，Vue 2 没有“app”的概念，我们定义的应用程序只是通过 new Vue() 创建的根 Vue 实例。从同一个 Vue 构造函数创建的每个根实例共享相同的全局配置，因此全局配置使得在测试期间很容易意外地污染其他测试用例。用户需要仔细存储原始全局配置，并在每次测试后恢复 (例如重置 Vue.config.errorHandler)。有些 API 像 Vue.use 以及 Vue.mixin 甚至连恢复效果的方法都没有，这使得涉及插件的测试特别棘手。
createApp:
import { createApp } from ‘vue’
const app = createApp({})
调用 createApp 返回一个应用实例，应用程序实例暴露当前全局 API 的子集，任何全局改变 Vue 行为的 API 现在都会移动到应用实例上，以下是当前全局 API 及其相应实例 API 的表：
[图片上传失败…(image-c4a9d6-1601349914900)]
所有其他不全局改变行为的全局 API 现在被命名为 exports。
1.4.1.2全局和内部API已重构为可 tree-shakable
Tree shaking 是一个通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code) 行为的术语。
它依赖于ES2015中的 import 和 export 语句，用来检测代码模块是否被导出、导入，且被 JavaScript 文件使用。
在现代 JavaScript 应用程序中，我们使用模块打包(如webpack或Rollup)将多个 JavaScript 文件打包为单个文件时自动删除未引用的代码。这对于准备预备发布代码的工作非常重要，这样可以使最终文件具有简洁的结构和最小化大小。
2.x 语法：
// 全局 API Vue.nextTick() 不能tree-shakingimport Vue from ‘vue’

Vue.nextTick(() => {
// 一些和DOM有关的东西})
3.x语法：
全局 API 现在只能作为 ES 模块构建的命名导出进行访问，如果模块绑定器支持 tree-shaking，则 Vue 应用程序中未使用的全局 api 将从最终捆绑包中消除，从而获得最佳的文件大小。
import { nextTick } from ‘vue’
nextTick(() => {
// 一些和DOM有关的东西})
受影响的API：
Vue.nextTick
Vue.observable (用Vue.reactive替换)
Vue.version
Vue.compile
Vue.set
Vue.delete
1.4.1.3组件上 v-model 用法已更改
自定义v-model时，prop和事件默认名称已更改：
prop: value -> modelValue
event: input -> update:modelValue
.sync和组件的model选项已移除，可用v-model作为替代
现在可以在同一个组件上使用多个 v-model 进行双向绑定；
现在可以自定义 v-model 修饰符
比如自定义v-model.capitalize,绑定为字符串第一个字母的大写
1.4.1.4 和非 - v-for 节点上 key 用法已更改
Vue 2.x 建议在 v-if/v-else/v-else-if 的分支中使用 key，Vue 3.x 中仍能正常工作，但不再建议，因为没有为条件分支提供 key 时，也会自动生成唯一的 key。
在 Vue 2.x 中标签不能拥有 key，在 Vue 3.x 中 key 则应该被设置在标签上。
1.4.1.5在同一元素上使用的 v-if 和 v-for 优先级已更改
Vue 3.x 中v-if 会拥有比 v-for 更高的优先级。
由于语法上存在歧义，建议避免在同一元素上同时使用两者，比如利用计算属性筛选出列表。
1.4.1.6v-bind=“object” 现在排序敏感
Vue 2.x 如果一个元素同时定义了 v-bind=“object” 和一个相同的单独的 property，那么这个单独的 property 总是会覆盖 object 中的绑定。
Vue 3.x 声明绑定的顺序决定了它们如何合并。
// 2.x中 id最终为red 3.x中 id为blue

1.4.1.7v-for 中的 ref 不再注册 ref 数组
Vue 2 中，在 v-for 里使用 ref属性时，从$refs中获取的相应属性会是一个ref数组。
Vue 3中则将ref绑定到一个更灵活的函数上 (ele) => { …//保存ele的操作 }：
template: script: import { ref, onBeforeUpdate, onUpdated } from 'vue' export default { setup() { let itemRefs = [] const setItemRef = el => { itemRefs.push(el) } onBeforeUpdate(() => { itemRefs = [] }) onUpdated(() => { console.log(itemRefs) }) return { itemRefs, setItemRef } }}

Vue3.0新特性及使用方法相关推荐

Vue 3.0 新特性及使用方法
介绍 2020年9月19日凌晨,尤雨溪大大正式发布了 Vue.js 3.0 版本,代号:One Piece.此框架新的主要版本提供了更好的性能.更小的捆绑包体积.更好的 TypeScript 集成.用 ...
C# 7.0 新特性：本地方法
C# 7.0:本地方法 VS 2017 的 C# 7.0 中引入了本地方法,本地方法是一种语法糖,允许我们在方法内定义本地方法.更加类似于函数式语言,但是,本质上还是基于面向对象实现的. 1. 本地方 ...
vue3.0新特性及用法
1.性能上提升1.3-2倍 2.按需加载和 compsition api(组合api) createApp 在 Vue 3 中,改变全局 Vue 行为的 API 现在被移动到了由新的 createA ...
C# 3.0新特性之扩展方法
C#3.0扩展方法是给现有类型添加一个方法.现在类型既可是基本数据类型(如int,String等),也可以是自己定义的类. //Demo--1 //扩展基本类型 namespace TestExten ...
input change获取改变之前的值和改变之后的值_使用Vue3.0新特性造轮子 WidgetUI3.0 （Input输入框组件）
我们先看看组件效果图: 基本用法 type属性(type="password") 占位符(placeholder="请输入") 带清除按钮(clear) 输入限 ...
accept 返回0_使用Vue3.0新特性造轮子 WidgetUI3.0 （Upload上传文件组件）
我们先看看组件效果: 基本使用可选参数( icon='icon-service') props属性: title(类型 String) 组件显示的文本,默认"上传'. icon(类型 St ...
C# 3.0 新特性
http://developer.51cto.com/art/200908/148353.htm 在发布Visual Studio 2005和C#2.0之后,微软公司又马不停蹄的展示了人们所期望的C# ...
vue3的新特性custom renderer
文章转自:https://blog.51cto.com/15077561/2594771 默认的目标渲染平台在vue3中允许用户自定义目标渲染平台,以往的版本中目标渲染被局限于浏览器dom平台,而现 ...
[转]C# 2.0新特性与C# 3.5新特性
C# 2.0新特性与C# 3.5新特性一.C# 2.0 新特性: 1.泛型List<MyObject> obj_list=new List(); obj_list.Add(new MyO ...

Vue3.0新特性及使用方法

Vue3.0新特性及使用方法相关推荐

最新文章

热门文章