vue3技术的综合注解【重要】

vue3的简介

vue3带来了什么

使用vue-cli创建工程

注意版本是OK的。

main.js

关闭语法检查。

App.vue

vue3在线开发者工具

setup

返回一个对象。

返回一个渲染函数。

ref函数

实现响应式。

该函数加工数据生成引用实现的实例对象，简称引用对象。

使用.value获取数据。

模板里面自动.value。

对象的响应式。

总结

reactive

实现响应式

模拟vue3实现响应式。

增删改查！！！

从对象中读数据。

从对象中修改属性。

从对象中删除属性。

通过返回值告诉我们是否成功。可以捕获错误。有利于进行框架封装。

使用代理对象和反射对象。

总结

reactive用的多一点，数据一般我们存放在一个对象中，使用reactive。

setup的注意点

vue3中推荐的命名插槽。

cpmuted计算属性

组合式方法，要使用的话，需要我们引入。组合式的API。

vue3计算属性的写法：

完整写法：

总结

watch属性

监视多个响应式数据用数组。

监视对象。

总结

watch时value的问题

我们监视的需要是保存数据的一个结构。所以监视基本类型的值得时候我们不能.value。

监视一个ref创建的对象，要么你使用.value，要么进行深度监视。

watchEffect函数

使用了谁，就监视谁，可以进行多层监视。

总结

vue3生命周期

也可以通过组合式API写生命周期钩子。

自定义hook函数

点击页面然后显示鼠标的坐标。

在卸载的时候应该移除点击事件。

我们需要复用这个方法。我们创建一个文件夹hooks。

文件命名我们一般使用use什么什么的方法。

函数暴露出去给别人使用。

可以默认暴露，名字都不需要写。

记得引入组合式API。

暴露出去有返回值。

在需要使用的地方引入。

我们引入的是函数，可以直接调用。

总结

toRef与toRefs

返回值中使用，使得模板字符串更简单。

总结

其他组合API

shallowReactive

只考虑第一层数据的响应式。

shallowRef

不去对象类型的响应式，

ref

会处理，底层会去请求

reactive

。

接收一个响应式数据，里面所有的东西都不允许修改。

shallowReadonly

，只考虑第一层数据不让修改，更深层次的数据可以进行修改。

将响应式的数据重新变为普通数据。用的不多。

toRaw只能处理reactive缔造的响应式数据。

给响应式对象中添加数据时，我们有时候不希望它设置为响应式的，所以我们标记为普通对象，因为响应式对象是很复杂的对象，我们提高速度。

markRaw的应用场景多一点。

customRef，自定义的ref。可以自己写逻辑。

页面防抖。

组件间的通讯方式。祖先组件----->后代组件。

对响应式的数据进行判断。

Composition API的优势

vue2时代的API，所有功能的组成部分都拆散了。

新的组件

减少层级的嵌套

异步组件。异步引入一个组件。动态引入。

promise也会让异步组件延迟展示。