2022-11-21 vue3有哪些新增特性?

一.vue3快速上手

1.vue3带来了什么?

性能的提升

打包大小减少41%
初次渲染快55%,更新渲染快133%
内存占比少54%

源码的升级

使用Proxy代替defineProperty实现响应式
重写虚拟DOM的实现和Tree-Shaking,用于去除未使用的JS代码

更好地支持Typescript

新的特性

特性1.Composition API(组合API)

setup配置
ref和reactive
watch和watchEffect
provide和inject

特性2.新的内置组件

Fragment
Teleport
Susponse

特性3.其他改变

新的生命周期钩子
data选项应始终被声明为一个函数
移出keyCode支持作为v-on的修饰符

2.vite

vite是新一代前端构建工具,有如下优势

开发环境钟,无需打包,可以快速的冷启动--动态地根据路由来加载对应模块
轻量快速地热重载
真正的按需编译,不再等待整个应用编译完成

使用vite创建一个vue3项目:create-vite-app vue3_vite

安装vite:npm install -g create-vite-app
创建项目:create-vite-app vue3_vite
进入项目目录后:npm i
运行:npm run dev

对比:使用脚手架vue-cli创建项目:vue create 项目名称

3.vue3项目文件与vue2的区别

vue.config.js:配置内容和vue2.0的一样，也就是webpack配置

main.js 只有三行代码

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

其中,createApp是一个工厂函数,createApp(App).mount('#app'),也可以写成

let app=createApp(App)
app.mount('#app')

变量app是一个实例，和vm类似

app.vue:在vue文件中不再需要使用根节点

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

二.常用的组合式(Composition)API:setup,ref,reactive

1.setup函数:其返回值为一个对象，该对象内容可以直接被使用

vue3.0使用setup作为vue的配置项,数据、方法等都配置在setup里面，
也就是说vue2.0中全部的配置都配置在setup里面。

setup配置项的使用

<template>
    <span>name:{{ name }}</span>
    <span>age:{{ age }}</span>
    <button @click="change">点我</button>
</template>
<script>
export default {
    name: 'App',
    setup() {
        let name = '小智';
        let age = 12;
        function change() {
            alert('点我成功');
        }
        return {
            name,
            age,
            change
        };
    }
};
</script>

vue2.0和vue3.0不能混合使用，vue2.0的内容会报underfined

2.ref函数:实现数据响应式

ref函数会将数据封装成一个引用对象，
通过此对象实现数据的响应式。

ref函数的使用

<template>
    <span>name:{{ name }}</span>
    <span>age:{{ age }}</span>
    <button @click="change">点我</button>
</template>
<script>
import { ref } from 'vue';//引用对象
export default {
    name: 'App',
    setup() {
        let name = ref('小智');
        let age = ref(12);
        function change() {
            name.value = '你好';
            name.age = 19;
        }
        return {
            name,
            age,
            change
        };
    }
};
</script>

3.reactive函数:定义一个对象类型的响应式数据

reactive函数的使用

import {ref ,reactive} from 'vue'
let name = ref('zs')
let age = ref(18)
let obj = reactive({
      type:"aaa",
      salay:19999
    })
// 取值的时候就不用在后面加.value 了
// 方法
    function changeName(){
      name.value = '李四',
      age.value = 20,
      obj.type = "五六"
    }