文章目录
求一键三连
希望大家看完觉得有用的话点赞、关注和收藏，感谢！！！
前言
这么多看下来，最大的感受就是，以前放在的data、methods、computed等函数里面的东西，都变成了使用这些函数，比如computed，谁是computed的，就用一下这个函数computed（），然后就可以了，函数化
在composition api中，所使用的函数，例如ref（），reactive（），computed（），还有生命周期函数等都需要提前在export default{ }外面进行导入后才可以使用，别忘了导读
script setup语法糖（重要）
后面写项目都会用这个语法糖，所以这个语法糖所以必须要掌握
vue3.2版本之后，setup直接写在script里面，不用return，因为只有一个setup函数，所以有了这个语法糖。
同时非常重要的一点，在导入组件使用时，不用在componment里面注册了，直接导入就可以使用
这个最后的一句话感觉是个废话？因为本来实例多次创建，每个实例都是不一样的，就像组件是类，实例是类创建的实例化对象，每一个对象都是不一样的，所以这个最后一句话有点懵逼
这是我用options api写的，可以看到创建了三个实例，但是每个实例的计数器都不一样，每个实例都是不一样的，每次调用组件创建都是一个新的实例
（ps：这里有一点需要特别注意，那就是语法糖写法和非语法糖写法中很多函数使用是不一样的，例如emit，就完全不一样）
如果是这样的话，那么一定要熟记语法糖里面各种方法的写法，因为最后用的最多的还是语法糖写法的。
具体的区别，可以看这篇文章，遇到的时候查就可以了。
Vue3.2 setup语法糖
语法糖里其他语法的使用
注意在function里面的就不是顶层的了
所以模板也可以有一个新的位置，script放在顶部更好一点，因为这样template和css就可以在一起，比较好找一点，但是之前那样也没有问题。
这样就是不用注册组件了。
父子组件通信
父子之间通信的props和emit和以前也完全不一样了，要掌握这个写法
这两个参数都是在作用域里面被定义好的，可以直接使用
想要获得组件实例里面的方法或者数据，是要在需要使用组件里面在defineExpose（）里面暴露这个方法，写一下方法名。然后在父组件里面就通过组件实例就可以获取到这个方法了
computed（）函数
之前写法：全都放在computed里面
现在的写法：每个需要计算的都使用computed函数，内容包含在这个函数里面
不管怎么写，本质都是在函数里进行拼接操作，然后返回
computed返回的是一个ref对象，所以在函数的操作里应该用fullname.value来进行操作，否则会报错
setup中通过ref获取元素和组件
获取原生的DOM元素
之前获取元素：
this.$refs.name
现在的做法：
因为setup里不可以使用this
创建一个ref对象，然后绑定到元素上就可以获得了。（感觉就是多一个注册ref对象）
也可以在mounted里使用：
在setup中mounted函数是onMounted（ ）,记住使用是要加value值的，因为是用了ref
生命周期函数要再复习一下，有些遗忘
生命周期函数
在原有的生命周期函数上多加一个on，但是 beforeCreate() 、created() 没有，因为不需要（no needed），他们的操作都合并到setup里面了，所以这些生命周期函数里面要做的事情放到setup里面做就好了
在执行setup函数的过程中, 你需要导入要使用的生命周期函数
import { onMounted, onUpdated, onUnmounted } from 'vue'
provide 和inject（了解即可）
都变成了函数 provide（）、inject（）
options api写法：
是一个数组：provide：[ 'name' , 'age']
还是和之前一样，因为后面不用，数据传输都比较复杂，所以后面都用piana
唯一要注意的是这些都要导入后才可以使用
import { provide, inject } from 'vue'
composition api写法：
provide（‘属性名’，属性值）
const height = inject("height", 1.88) //1.88就是默认值
在原始数据上使用响应式，则传入后可以是响应式
在composition api中ref拿到的数据会自动给我们解包，所以拿到（name）直接用就可以了
（如果是options api用ref就要手动解包）
侦听数据（了解）
也是变成函数
watch
深度侦听和浅侦听要回顾一下之前的watch
侦听给的都是proxy对象，如果想要获得普通对象
watch的immediate属性
Vue之watch的immediate属性和deep属性
watch 的一个特点是，最初绑定的时候是不会执行的，要等到 firstName 改变时才执行监听计算。那我们想要一开始就让他最初绑定的时候就执行改怎么办呢？我们需要修改一下我们的 watch 写法，修改过后的 watch 代码如下：
watch: {
firstName: {
handler(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
},
// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
immediate: true
}
}
mmediate:true代表如果在 wacth 里声明了 firstName 之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。
属性 deep，默认值是 false，代表是否深度监听，true表示深度监听
watcheffect
自动收集，不用手动绑定
编程方式的选择
以前的options api就特别好用，简单好用！
compositions aip就比较复杂，但是自由灵活，可以抽取，像react，那这样为什么不直接react呢？
哈哈哈，所以说，我目前觉得options api挺不错的，所以如果你觉得options api好用也可以不用切换的，适合自己的才是最好的。
composition api最好的作用就是可以抽取模块，因为都是函数，所以好抽取，把相同逻辑的抽到一个组件里，这样代码的复用性就很强了，就更高效一些，但是用起来可能并没有直接的更加高效。
函数式编程和java还是不一样的，java是面向对象的
js支持函数式编程和面向对象编程，两个都支持
记住一句话：适合自己才是最好的
hooks：钩子函数（回调函数）
hooks定义（摘录）：
系统运行到某一时期时，会调用被注册到该时机的回调函数
vue中的定义：
在 vue 组合式API里，以 “use” 作为开头的，一系列提供了组件复用、状态管理等开发能力的方法。
但主观来说，我认为vue 组合式API其本身就是“vue hooks”的关键一环，起到了 react hooks里对生命周期、状态管理的核心作用。（如 onMounted、 ref 等等）
关于hooks也有很多的知识要说，这里看这篇文章
浅谈：为啥vue和react都选择了Hooks🏂？
主要是针之前的mixin，hooks用来做代码复用的抽取好了太多。
相比于 mixins，它们简直太棒了！
// 单个name的写法
const { name, setName } = useName();
// 梅开二度的写法
const { name : firstName, setName : setFirstName } = useName();
const { name : secondName, setName : setSecondName } = useName();
- 方法和属性好追溯吗？这可太好了，谁产生的，哪儿来的一目了然。
- 会有重名、覆盖问题吗？完全没有！内部的变量在闭包内，返回的变量支持定义别名。
- 多次使用，没开N度？你看上面的代码块内不就“梅开三度”了吗？
concomposition api本身来说，其实就是一个hooks的写法：
无论是 vue 还是 react, 通过 Hooks 写法都能做到，将分散在各种声明周期里的代码块”，通过 Hooks 的方式将相关的内容聚合到一起。
这样带来的好处是显而易见的：“高度聚合，可阅读性提升”。伴随而来的便是 效率提升，bug变少。
Hooks 写法直接告别了 this，从“函数”来，到“函数”去。
函数每次执行都会是新的对象。
函数本身是一个对象，还有就是函数的闭包（这个没有掌握）
自定义hooks：
注意hooks的文件是.js
注意学这个的思路：
因为在组件中可能多次使用useTitle，但是多次调用，并不好，所以返回一个title在组件里面直接更改就好。
有一个小小的疑问就是，这样还符合单向数据流吗？（我觉得可能是因为这个不属于组件，只算抽取的逻辑，所以可以这样用，因为抽取出来的都是js）
immediate：true，表示一开始也要执行一次
在组件中使用uesTitle（）：
自己写出不来并没有关系，多看看别人怎么写，多学学就好，因为很多东西都不是自己写出来的，都是在借鉴别人的基础上写出来的。写算法题也是这样，很多时候不要死磕，多学习，多记忆，多掌握就好
1492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
