vue3学习

vue3

新版本的vue框架

vue3相对于vue2的优点：性能提高、源码升级、更好地支持TypeScript，有一些新的特性（组合API、新的内置组件等等）

创建

vue3工程的创建有两种：cli脚手架和使用vite创建

脚手架

和创建vue2工程差不多，只不过在创建时选择vue3选项，更常用

vite

vite是新一代的前端构建工具

优势：开发环境中，无需打包，可以快速地冷启动；轻量快速地热重载；真正的按需编译，不再等待整个应用编译完成

使用：首先使用npm init vite-app 工程名字进行创建工程，然后进入工程，然后使用npm install安装依赖，最后使用npm run dev运行

组合式api

setup

vue3中的一个新的配置项，值是一个函数

setup是所有组合式api“表演的舞台”

组件中用到的数据、方法等都要配置在setup中

setup中的函数的返回值可以为对象（对象中的属性和方法在模版中可以直接使用）、渲染函数（可以自定义渲染内容）

注意，vue3中仍可以向下兼容vue2中设置数据和方法的方式，但不建议混合使用，最好使用setup方法设置数据和方法。

注意，vue2方法配置的数据方法等可以访问到setup中的属性和方法，但setup中不能访问到vue2配置的数据和方法。并且如果有重名，setup优先

注意，setup在beforeCreate之前执行，其this是undefined

setup函数有两个参数：props和context。props是一个对象，包含组件外传进来的，且组件中使用props声明了的属性。context是上下文对象，其中有emit，可以使用context.emit触发自定义事件，context中的slot中存储的是父组件中传入的插槽的值，context中的attrs是一个对象，包含组件外传进来的，但没有在props配置中声明的属性

ref函数

在setup中设置数据时，如果直接设置，那么设置出来的不是响应式的数据，对其进行修改之后页面不会立马作出反应。所以需要使用ref()函数将其变为响应式数据，返回引用实现的实例对象

注意，ref()接收的数据可以是基本类型，也可以是对象类型

对于基本数据类型的数据，响应式依靠object.defineProperty()的get()和set()实现

对于对象类型的数据，响应式依靠reactive函数实现

reactive函数

定义一个对象类型的响应式数据，注意，是深层次的响应式数据

使用上类似ref()函数

注意，通过reactive函数定义的数据，修改时不像ref要使用.value

reactive通过使用Proxy来实现响应式，并且通过Reflect操作源对象内部的数据

computed

计算属性

可以使用vue2中的computed配置属性设置，但是不推荐

vue3中的方法是引入computed函数，在setup中设置：

watch函数

vue3中的watch是一个函数

注意，监视使用reactive实现的响应式数据时，无法获取正确的oldValue，并且强制开始深度监视，deep配置无效

当要监视reactive定义的响应式数据中的某个属性时，要以函数形式表示，例如不能写成person.name，应该写为()=>peison.name。但是，特别注意，当属性是对象类型时，需要使用deep配置开启深度监视

监视ref定义的对象类型的响应式数据时，要加上.value，才能实现深度监视

watchEffect函数

也是用于监视，但不指名监视对象，其参数是一个函数，该函数中用到了什么数据，则监视什么数据。

watchEffect有点像computed，但computed更注重于计算出来的值，需要返回值，而watchEffect更注意的是过程，不用返回值

toRef()和toRefs()

toRef()：创建一个ref对象，其value值指向另一个对象中的某个属性

用法：const 变量名=toRef(对象名，'属性名')，例如const name1=toRef(person,'name')，创建一个名为name1的ref对象，其指向person对象的name属性，即ref对象name1的value为person对象中name属性的值，并且name1的值修改时，name的值也修改。

toRefs()是toRef()的升级版，toRefs()可以批量处理一个对象中的所有属性

用法：const 变量名=toRefs(对象名),返回的是一个对象

shallowReactive()和shallowRef()

类似饿reactive()和ref()

但shallowReactive()是设置浅层次的响应式数据，即只考虑对象类型中的第一层属性的响应式

shallowRef()只处理基本数据类型的响应式，不进行对象的响应式处理

如果有一个对象数据，结构比较深，但在以后的功能中只变化第一层属性，则可以使用shallowReactive()

如果有一个对象数据，后续功能之中不会修改该对象中的属性，而是生成新的对象来代替，则可以使用shallowRef()

readonly()和shallowReadonly()

readonly：让一个数据变成只读

shallowReadonly：让一个数据变成浅只读，即只让第一层数据只读

toRaw()和markRaw()

toRaw()可以将一个响应式数据变为普通数据，注意，只能是reactive()转换的响应式数据

markRaw()可以标记一个对象，使其不会成为响应式对象

customRef()

创建一个自定义的ref，并对其依赖项跟踪和更新触发显示控制

customRef()的参数是一个函数，该函数返回一个对象，对象中应该有set和get函数，当修改数据时，调用set，读取数据时，调用get。

例子：

...
setup(){
    ...
    //自定义一个名为myref的ref
    function myref(value){
        return customRef((track,trigger)=>{
                return {
                    get(){
                        track()//通知vue追踪数据的改变
                        return value
                    },
                    //newvalue是修改数据时，修改后的数据
                    set(newvalue){
                        value=newvalue
                        trigger()//通知vue重新解析模版
                    }
                }
            }
        )
    }
    //使用自定义的ref
    const test=myref('yes')
    ...
}
...

 provide与inject

一种组件之间的通信方式，可以实现祖孙组件之间的通讯

父组件中有一个provide()，写在setup中，参数是子组件中接受的数据名字、传递数据名字，例如：const name='luna'     provide('name',name)

子组件中有一个inject()，也是写在setup中，参数是子组件中接收的数据名字，返回接收到的数据。例如：const name=inject('name')

一般用于祖孙组件之间传递数据

用来判断响应式数据的api

isRef：检查一个值是否为ref对象

isReactive：检查一个对象是否是由reactive创建的响应式代理

isReadonly：检查一个对象是否是由Readonly创建的只读代理

isProxy：检查一个对象是否是由reactive或者Readonly方法创建的代理。

Vue3中生命周期

Vue3中可以继续使用Vue2中的生命周期钩子，但要注意，beforeDestroy被改名为beforeUnmount，destroyed被改名为Unmounted

Vue3中也提供了组合API形式的生命周期钩子（写在setup中）：

 组合式API中的生命周期钩子函数的执行时机比写在配置项中的生命周期钩子函数的执行时机早

自定义hook

本质是一个函数，将setup函数中使用的组合式API进行了封装，便于复用代码。

使用时，在一个单独的js文件中，暴露一个函数，该函数中是封装的组合式API，然后在想要使用这些代码的vue文件中引入这个函数，并且使用。

新的组件

Fragment

在vue2中，组件必须有根标签

但在vue3中，可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素之中

可以减少标签层级，减少内存占用

Teleport

可以将我们组件的html结构移动到指定的位置

使用时，使用标签包裹想要移动的html结构，并且在标签中使用属性to表示想要将html结构移动到哪里去，例如to='body'表示将html结构移动到body中

Suspense

实验阶段

在等待异步组件时渲染一些额外内容，让应用有更好的体验。

使用时用标签包裹，里面首先使用template标签包裹异步组件，要注明v-slot:default，并且使用另一个template标签包裹在等待异步组件时渲染的内容，并且要注明v-slot:fallback

其他改变

全局API的转移

vue2中有很多全局API和配置，vue3中对这些API作出了调整

将全局API放在应用实例(app)上

 data

vue3中data配置必须写为函数

vue3中过渡类名中将v-enter改为v-enter-from，将v-leave改为v-leave-from

移除

移除了keyCode作为v-on的修饰符，同时不再支持config-keyCode

移除了v-on.native修饰符

移除过滤器