Vue3核心概念、新特性及与Vue2的区别

2021-09-30  本文已影响0人  前端岚枫

大家好，我是前端岚枫，一枚二线城市的程序媛，上篇主要跟分享了《VUE系列-Vue中组件的应用(三)》，今天主要跟大家分享我整理的vue3的相关核心概念及其新特性，与Vue3的区别，主要包括Vue3性能提升、新的特性、生命周期、如何创建项目等等。

1.Vue3简介

2.Vue3带来了什么

1.性能的提升

2.源码的升级

3.拥抱TypeScript

4.新的特性

  1. Composition API（组合API）
  1. 新的内置组件
  1. 其他改变

一、创建Vue3.0工程

1.使用 vue-cli 创建

官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue_test
## 启动
cd vue_test
npm run serve

2.使用 vite 创建

官方文档：https://v3.cn.vuejs.org/guide/installation.html#vite

vite官网：https://vitejs.cn

[图片上传失败...(image-66dec8-1632991512842)][图片上传失败...(image-31e7e7-1632991512842)]

## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev

二、常用 Composition API

官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html

1.拉开序幕的setup

  1. 理解：Vue3.0中一个新的配置项，值为一个函数。
  2. setup是所有Composition API（组合API）“ 表演的舞台 ”。
  3. 组件中所用到的：数据、方法等等，均要配置在setup中。
  4. setup函数的两种返回值：
    1. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
    2. 若返回一个渲染函数：则可以自定义渲染内容。（了解）
  5. 注意点：
    1. 尽量不要与Vue2.x配置混用
      • Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。
      • 但在setup中不能访问到Vue2.x配置（data、methos、computed...）。
      • 如果有重名, setup优先。
    2. setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

2.ref函数

3.reactive函数

4.Vue3.0中的响应式原理

vue2.x的响应式

Object.defineProperty(data, 'count', {
    get () {}, 
    set () {}
})

Vue3.0的响应式

new Proxy(data, {
    // 拦截读取属性值
    get (target, prop) {
        return Reflect.get(target, prop)
    },
    // 拦截设置属性值或添加新属性
    set (target, prop, value) {
        return Reflect.set(target, prop, value)
    },
    // 拦截删除属性
    deleteProperty (target, prop) {
        return Reflect.deleteProperty(target, prop)
    }
})

proxy.name = 'tom'

5.reactive对比ref

6.setup的两个注意点

7.计算属性与监视

1.computed函数

import {computed} from 'vue'

setup(){
    ...
    //计算属性——简写
    let fullName = computed(()=>{
        return person.firstName + '-' + person.lastName
    })
    //计算属性——完整
    let fullName = computed({
        get(){
            return person.firstName + '-' + person.lastName
        },
        set(value){
            const nameArr = value.split('-')
            person.firstName = nameArr[0]
            person.lastName = nameArr[1]
        }
    })
}

2.watch函数

//情况一：监视ref定义的响应式数据
watch(sum,(newValue,oldValue)=>{
    console.log('sum变化了',newValue,oldValue)
},{immediate:true})

//情况二：监视多个ref定义的响应式数据
watch([sum,msg],(newValue,oldValue)=>{
    console.log('sum或msg变化了',newValue,oldValue)
}) 

/* 情况三：监视reactive定义的响应式数据
            若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
            若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
*/
watch(person,(newValue,oldValue)=>{
    console.log('person变化了',newValue,oldValue)
},{immediate:true,deep:false}) //此处的deep配置不再奏效

//情况四：监视reactive定义的响应式数据中的某个属性
watch(()=>person.job,(newValue,oldValue)=>{
    console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true}) 

//情况五：监视reactive定义的响应式数据中的某些属性
watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
    console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true})

//特殊情况
watch(()=>person.job,(newValue,oldValue)=>{
    console.log('person的job变化了',newValue,oldValue)
},{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效

3.watchEffect函数

//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
watchEffect(()=>{
    const x1 = sum.value
    const x2 = person.age
    console.log('watchEffect配置的回调执行了')
})

8.生命周期

vue2.x的生命周期[图片上传失败...(image-2cc86e-1632991512842)]vue3.0的生命周期[图片上传失败...(image-4ea70c-1632991512842)]

1

9.自定义hook函数

10.toRef

三、其它 Composition API

1.shallowReactive 与 shallowRef

2.readonly 与 shallowReadonly

3.toRaw 与 markRaw

4.customRef

<template>
    <input type="text" v-model="keyword">
    <h3>{{keyword}}</h3>
</template>

<script>
    import {ref,customRef} from 'vue'
    export default {
        name:'Demo',
        setup(){
            // let keyword = ref('hello') //使用Vue准备好的内置ref
            //自定义一个myRef
            function myRef(value,delay){
                let timer
                //通过customRef去实现自定义
                return customRef((track,trigger)=>{
                    return{
                        get(){
                            track() //告诉Vue这个value值是需要被“追踪”的
                            return value
                        },
                        set(newValue){
                            clearTimeout(timer)
                            timer = setTimeout(()=>{
                                value = newValue
                                trigger() //告诉Vue去更新界面
                            },delay)
                        }
                    }
                })
            }
            let keyword = myRef('hello',500) //使用程序员自定义的ref
            return {
                keyword
            }
        }
    }
</script>

5.provide 与 inject

[图片上传失败...(image-6f550e-1632991512842)]

setup(){
    ......
    let car = reactive({name:'奔驰',price:'40万'})
    provide('car',car)
    ......
}
  1. 后代组件中：
setup(props,context){
    ......
    const car = inject('car')
    return {car}
    ......
}

6.响应式数据的判断

四、Composition API 的优势

1.Options API 存在的问题

使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改 。

image.pngimage.png

2.Composition API 的优势

我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起。

五、新的组件

1.Fragment

2.Teleport

<teleport to="移动位置">
    <div v-if="isShow" class="mask">
        <div class="dialog">
            <h3>我是一个弹窗</h3>
            <button @click="isShow = false">关闭弹窗</button>
        </div>
    </div>
</teleport>

3.Suspense

import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

<template>
    <div class="app">
        <h3>我是App组件</h3>
        <Suspense>
            <template v-slot:default>
                <Child/>
            </template>
            <template v-slot:fallback>
                <h3>加载中.....</h3>
            </template>
        </Suspense>
    </div>
</template>

六、其他

1.全局API的转移

//注册全局组件
Vue.component('MyButton', {
  data: () => ({
    count: 0
  }),
  template: '<button @click="count++">Clicked {{ count }} times.</button>'
})

//注册全局指令
Vue.directive('focus', {
  inserted: el => el.focus()
}

2.其他改变

.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-leave,
.v-enter-to {
  opacity: 1;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.v-leave-from,
.v-enter-to {
  opacity: 1;
}

<my-component
  v-on:close="handleComponentEvent"
  v-on:click="handleNativeClickEvent"
/>

<script>
  export default {
    emits: ['close']
  }
</script>

过滤器虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是 “只是 JavaScript” 的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。

总结

Vue3不仅在性能上有了很大提升，在我们编程方面也方便了很多。小伙伴们可以在做新项目的时候尝试着用Vue3来替代Vue2,体验一下新的效果。

上一篇 下一篇

猜你喜欢

热点阅读