Vue3笔记——（尚硅谷张天禹Vue笔记)

Vue3

Vue3简介

1.Vue3简介

    .2020年9月18日，Vue.js发布3.0版本，代号: One Piece(海贼王)。耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者

    . github上的tags地址: https://github.com/vuejs/vue-next/releases/tag/v3.0.0

2.Vue3带来了什么

    .性能的提升

    .打包大小减少41%

    .初次渲染快55%，更新渲染快133%。内存减少54%

3.拥抱TypeScript

    . vue3可以更好的支持TypeScript

4.新的特性

    1.Composition API(组合API)

        . setup配置

        . ref与reactive

        . watch与watchEffect

        . provide与inject

        . ...

    2.新的内置组件

        . Fragment

        . Teleport

        . suspense

    3.其他改变

        . 新的生命周期钩子

        . data选项应始终被声明为一个函数

        . 移除keyCode支持作为v-on的修饰符

        . ...

使用vue-cli创建工程

1.使用vue-cli 创建

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

## 查看@vue/cli版本,确保@vue/cli版本在4.5.o以上

vue --version

## 安装或者升级你的@vue/cli

npm install -g @vue/cli

## 创建

vue create vue_test

## 启动

cd vue_test

npm run serve

使用vite创建工程

⒉使用vite 创建

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

vite官网: https://vitejs.cn

.什么是vite? ——相对于webpack,新一代前端构建工具。

.优势如下:

    。开发环境中，无需打包操作，可快速的冷启动。

    。轻量快速的热重载(HMR)。

    。真正的按需编译，不再等待整个应用编译完成。

##创建工程

npm init vite-app

npm init vite-app vue3_test_vite

##进入工程目录

cd

##安装依赖

npm install

##运行

npm run dev

分析Vue3的工程结构

分析vue-cli所创建出的vue3工程

关闭语法检查：vue3自带的vue.config.js中的内容直接替换为vue2的写法也行，如下：
module.exports = {
  lintOnSave:false,//关闭语法检查
}

App.vue中vue3中template标签中可以没有根标签括起来

main.js

// 引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
//引入App组件
import App from './App.vue'

// createApp(App).mount('#app')
// 创建应用实例对象--app(类似于之前Vue2中的vm,但app比vm更“轻”)
const app = createApp(App)

app.mount('#app')

setTimeout(() => {    
    app.unmount('#app')
}, 1000);

/* 类似vue2中的如下方式的创建vm挂载Vue到app挂载点,但main.js中不兼容vue2的写法,把vue2的main.js拿来替换不能用,因为无法引入Vue
const vm = new VueElement({
    render:h =>h(App)
})
vm.$mount('app') */

vue3的开发者工具

Vue3开发者工具,可在极简插件中下载，选那个vue图标右下角带圆角矩形的

极简插件_Chrome扩展插件商店_优质crx应用下载

别使用谷歌浏览器下载，会自动删除下载的文件

初识setup

是常用Composition API   组合式API

拉开序幕的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和异步组件的配合)

App.vue

ref函数处理基本数据类型

 除了html中标签中ref属性，vue3多了一个ref函数。
ref加工后的数据就是一个对象RefImpl，reference implement引用实现，引用实现的对象简称引用对象。里面有个value属性，为实现数据响应式的，通过还是get和set做的响应式在__proto__原型对象中的。像vue2中的_data中的东西放在了vm上。

App.vue

ref函数处理对象类型的数据

对于ref函数处理的对象类型，没有直接变为RefIMpl应用对象，而是变为了Proxy代理对象。是内部求助的reactive函数，这个函数封装了proxy。

App.vue

reactive函数

reactive函数
。作用:定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数)
。语法: const 代理对象= reactive(源对象)接收一个对象(或数组)，返回一个代理对象〈Proxy的实例对象，简称proxy对象)
。 reactive定义的响应式数据是"深层次的”。
。内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作。

App.vue

Vue2的响应式原理的回顾

vue2.x的响应式

. 实现原理:

    。对象类型:通过object.defineProperty()对属性的读取、修改进行拦截(数据劫持)。

    。数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)。

        object.defineProperty(data， 'count ', {

            get(){},

            set(){}

        })

. 存在问题:

    。新增属性、删除属性,界面不会更新。

    。直接通过下标修改数组,界面不会自动更新。

Vue2项目中的App.vue，来看vue2的响应式存在的问题

Vue3的响应式原理Proxy

Vue3中不存在vue2中的添加或属性或修改数组元素的不是响应式的页面不变的问题

Vue3中的App.vue

Object.defineProperties、new Proxy()模拟vue2和vue3的响应式原理

响应式原理.html

Vue3响应式原理Reflect

 Reflect反射的方式，容错性更好，我们修改上面的Vue3的模拟中的操作

Vue3的响应式.html

实现原理:

    。通过Proxy(代理)︰拦截对象中任意属性的变化,包括:属性值的读写、属性的添加、属性的删除等。

    。通过Reflect(反射)︰对源对象的属性进行操作。

    。MDN文档中描述的Proxy与Reflect:

        .Proxy: https:/ldeveloper.mozilla.org/zh-CN/docs/WeblJavaScript/Reference/Global_Objects/Proxy

        .Reflect: https:/ldeveloper.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

reactive和ref的对比

. 从定义数据角度对比:

    。ref用来定义:基本类型数据。

    。 reactive用来定义:对象(或数组)类型数据。

    。备注: ref也可以用来定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象。

. 从原理角度对比:

    。ref通过 object.definePropertv()的get与set来实现响应式(数据劫持)。

    。reactive通过使用Proxy来实现响应式(数据劫持)﹐并通过Reflect操作源对象内部的数据。

. 从使用角度对比:

    。ref定义的数据:操作数据需要.value，读取数据时模板中直接读取不需要.value 。

    。reactive定义的数据:操作数据与读取数据:均不需要.value。

setup的两个注意点

 setup的两个注意点

. setup执行的时机

    。在beforeCreate之前执行一次，this是undefined。

. setup的参数

    。props:值为对象，包含:组件外部传递过来，且组件内部声明接收了的属性。

    。context: 上下文对象

        ` attrs:值为对象，包含:组件外部传递过来，但没有在props配置中声明的属性,相当于[this .$attrs 。

        ` slots: 收到的插槽内容,相当于this.$slots 。

        ` emit:分发自定义事件的函数,相当于this.$emit 。

vue2中的props传参，父组件写的参数，子组件props:[]没声明的参数，就会被$atts捡漏。vue2中slots父组件中写的额插槽的内容，会放在$slot中作为虚拟节点。
set第一个参数需要props声明，第二个参数用到的emit需要在上面声明给emits
vue3中使用具名插槽尽量用v-slot

App.vue

Demo.vue

Vue3computed计算属性

App.vue

Demo.vue

watch监视ref定义的数据

Demo.vue

App.vue中引用注册并渲染这个Demo.vue

watch监视reactive定义的数据

watch函数

    。与Vue2.x中watch配置功能一致。

两个小“坑":

    。监视reactive定义的响应式数据时: oldValue无法正确获取、强制开启了深度监视(deep配置失效)。

    。监视reactive定义的响应式数据中某个属性时: deep配置有效。

Demo.vue

App.vue中引用注册并渲染这个Demo.vue

watch时的value问题

ref()对基本类型，.value就是基本类型，但ref对对象类型，.value的是proxy代理对象。
所以watch为ref普通属性直接写，但watch为ref的对象时，修改person里面的属性，用person.value，还可在后面加上deep:true属性

watchEffect函数

watchEffect函数

. watch的套路是:既要指明监视的属性，也要指明监视的回调。

. watchEffect的套路是:不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

. watchEffect有点像computed:

    。但computed注重的计算出来的值（回调函数的返回值)，所以必须要写返回值。

    。而watchEffect更注重的是过程（回调函数的函数体)，所以不用写返回值。

Demo.vue

App.vue中引用注册并渲染这个Demo.vue

Vue3生命周期钩子

vue2生命周期钩子前6个都一样，最后beforeDestroy和destroyed与vue3的beforeUnmount和unmounted不一样.vue2中即使没写el，也能执行beforeCreate和created这两步，但vue3得都有才能开始执行beforeCreate。vue3也能通过配置项的形式引用生命周期钩子，也可通过组合式api的形式去使用生命周期钩子

Vue3.0也提供了Composition API形式的生命周期钩子，与Vue2.x中钩子对应关系如下:

    。beforeCreate ===> setup()

    。created =======> setup()

    。beforeMount =======> onBeforeMount

    。mounted =======> onMounted

    。beforeUpdate ===> onBeforeUpdate

    。updated =======> onUpdated

    。beforeUnmount ==> onBeforeUnmount

    。unmounted =====> onUnmounted

Demo.vue

App.vue

自定义hook

.什么是hook?——本质是一个函数，把setup函数中使用的Composition APlI进行了封装。
·类似于vue2.x中的mixin。
·自定义hook的优势:复用代码,让setup中的逻辑更清楚易懂。

本来在Demo.vue中写的鼠标打点的方法，但可能其他组件也需要使用改鼠标打点的功能，要么将这段代码复制粘贴，或者我们可以在src下建一个hooks文件夹，创建userPoint.js文件，然后在这里写那些代码，然后返回出去，然后Demo.vue中再引入

usePoint.js

import {reactive,onMounted, onBeforeUnmount} from 'vue'

// function savePoint(){
export default function (){

    //实现鼠标打点的数据
    let point = reactive({
        x:0,
        y:0
    })

    //实现鼠标打点的方法
    function savePoint(event){
            point.x = event.pageX
            point.y = event.pageY
            console.log(event.pageX,event.pageY);
    }

    //实现鼠标打点相关的生命周期钩子
    onMounted(()=>{
        window.addEventListener("click",savePoint)
    })

    onBeforeUnmount(()=>{
        window.removeEventListener("click",savePoint)
    })

    return point
}

// export default savePoint

Demo.vue

toRef与toRefs

toRef：将一个不是ref的变成ref

. 作用:创建一个ref对象，其value值指向另一个对象中的某个属性。

· 语法:const name = toRef(person , ' name ')

. 应用:要将响应式对象中的某个属性单独提供给外部使用时。

. 扩展: toRefs 与toRef功能一致，但可以批量创建多个ref对象，语法: toRefs(person)

Demo.vue

 App.vue中引入即可

其他组合式API

 不常用

shallowReactive与shallowRef

  App.vue中导入注册渲染Demo.vue. shallowReactive:只处理对象最外层属性的响应式（浅响应式)。

. shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理。

. 什么时候使用?

    。如果有一个对象数据，结构比较深,但变化时只是外层属性变化===> shallowReactive。

    。如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换===>shallowRef。

Demo.vue

readOnly与shallowReadOny

readonly:让一个响应式数据变为只读的（深只读)。

shallowReadonly:让一个响应式数据变为只读的（浅只读）

应用场景:不希望数据被修改时。

Demo.vue

toRaw与markRaw

. toRaw:

    。作用:将一个由reactive生成的响应式对象转为普通对象。

    。使用场景:用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新.

. markRaw":

    。作用:标记一个对象，使其永远不会再成为响应式对象。

    。应用场景:

        1.有些值不应被设置为响应式的，例如复杂的第三方类库等。

        2.当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

Demo.vue

App.vue中引用Demo.vue

customRef自定义ref

作用:创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显式控制。

通过一个防抖的案例：即输入框中输入内容，显示的h4标签过1秒再显示。

App.vue

provide与inject

。作用:实现祖与后代组件间通信

。套路:父组件有一个provide选项来提供数据，后代组件有一个inject选项来开始使用这些数据  

App.vue

Child.vue

Sun.vue

响应式数据的判断

响应式数据的判断API

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

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

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

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

App.vue

组合式API的优势

Composition API组合式API，Options API配置式API

Options API存在的问题：使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改。

2.Composition API的优势：我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起。还可借助hook函数发挥组合式API的威力。

新的组件

Fragment与Teleport

1.Fragment

    。在Vue2中:组件必须有一个根标签

    。在Vue3中:组件可以没有根标签,内部会将多个标签包含在一个Fragment虚拟元素中。好处:减少标签层级,减小内存占用

2.Teleport。什么是Teleport?

    Teleport是一种能够将我们的组件html结构移动到指定位置的技术。

    案例：传统的方式写弹窗会将外几层的组件全都撑开。使用teleport指定to='html'或to='body'就可将这段代码的东西传送到html标签或body标签中，也可加遮罩层

 App.vue

Child.vue

Son.vue

Dialog.vue

Suspense组件

网速快的时候，静态引入和动态引入一样，但网速慢的时候，静态引入是App和Child组件一起出来（最后引入取决于组件套娃中最后出来的那个组件出来后才显示），动态引入是App和Child谁加载完谁出来。但动态引入当某个先出来展示，某个组件加载慢1秒中后才出来就会用户体验不好，页面有抖动，可以用Suspense将子标签Child标签包起来，然后再Child组件还未加载好的时候先用一个loading替换

 App.vue

Child.vue

其他

全局API的转移

. Vue 2.x有许多全局API和配置。

    。例如:注册全局组件、注册全局指令等。

        //注册全局组件

        Vue. component( ' MyButton ', {

            data: () =>({

            count: 0}),

            template: 'clicked {{ count }} times.'

            })

        //注册全局指令

        Vue.directive( 'focus ', {

            inserted : el => el.focus()

            }

. Vue3.0中对这些API做出了调整:

    。将全局的API，即:Vue.xxx调整到应用实例(app ) 上

        2.x全局APl (vue )  =>   3.x 实例APl( app)

        Vue.config.xxxX  =>  app.config.xxXx

        Vue.config.productionTip  =>  移除

        Vue.component  =>  app.component

        Vue.directive  =>  app.directive

        Vue.mixin  =>  app.mixin        

        Vue.use  =>  app.use

        Vue.prototype  =>  app.config.globalProperties

2.其他改变

    . data选项应始终被声明为一个函数。

    。过度类名的更改:

        o Vue2.x写法

        .v-enter,

        .v-leave-to {

            opacity: 0;

            }

        .v-leave,

        .v-enter-to {

            opacity: 1;

            }

        o Vue3.x写法

        .v-enter-from，

        .v-leave-to {

            opacity: 0;

            }

        .v-leave-from,

        .v-enter-to {

            opacity: 1;

            }

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

    移除v-on.native修饰符

    移除了过滤器filter

    . . . . . .