Vue3.0学习笔记

如此风景
278 阅读1分钟 
本文是根据 尚硅谷Vue2.0+Vue3.0全套教程 整理出的学习笔记。仅供自我参考。

创建Vue3.0工程

image.png

image.png

image.png

初识setUp函数

image.png

ref函数

image.png

reactive函数

image.png

回顾Vue2的响应式原理

image.png

Vue3的响应式原理

image.png

reactive和ref的对比

image.png

setUp两个注意点

image.png

VUE3计算属性

image.png

watch函数

image.png

image.png

watchEffect函数

image.png

Vue3生命周期

image.png

image.png

自定义hook函数

把组件中一切数据，方法，生命周期函数等做了一系列封装。从而以导入的形式引入。做到代码复用

  1. 概念 image.png

  2. 封装

image.png

  1. 使用

image.png

toRef和toRefs

image.png

ShallowReactive与ShallowRef

image.png

深只读和浅只读

有一天，你从别人那拿到了响应式数据，但是不希望修改的时候使用它就可以。

image.png

image.png

toRaw和markRaw

把响应式数据变为最原始的数据对象。不带响应式的。

image.png

自定义Ref

在setUp中自己定义Ref

image.png

provider与inject

跨组件向孙组件传递数据时使用

image.png

响应式数据的判断

image.png

组合式api的优势

image.png

image.png

Fragment组件

image.png

Teleport组件

传送门：将子组件的某些元素传送到父组件里面去显示。

image.png

image.png

定义异步组件

正常引入组件会等待所有组件都加载完毕后才显示出来，异步组件可以先显示外层的，内部的什么时候加载出来什么时候显示就行，同时利用suspense组件可以预置一个临时插槽显示给用户。

image.png

image.png

用异步组件就可以实现把setup函数变成异步的。

image.png

image.png

Vue3中其他一些改变

image.png

image.png

image.png

image.png

avatar
文章
阅读
粉丝