Vue3学习笔记（说人话版）

通过导入reactive方法或者ref方法造值

通过reactive方法只能造对象，例如我们用state去接这个reactive方法造的对象

那么我们就要把state看做一个对象，我们想获取里面的值就得state.count

用ref方法造值（string,number,array等等都可以）既可以直接写值又可以写对象

computed（）的应用

computed方法是专门用来计算的。computed计算出来的值被称为计算属性，相当于一个常量一般不能被更改。

这是方法打印出来的数组

睡眠函数setTimeout()

然后这里有一个延时操作方法setTimeout(),看样子有点乱其实就是参数列表有两个参数，一个是逻辑语句然后跟个逗号后面就是延时时间。这个函数是异步的，程序会先往下执行

监听函数watch（）

watch(监听数据，（新值，旧值）=>{

})

注意监听数据的值是可以不用加.value的，vue会默认读取

初始：

点击更改按钮：

也可以同时监听多个数据：

然后watch也可以加第三个参数immediate立即执行

如果监听一个对象数据会很麻烦，如果直接修改数组的嵌套属性，是不可以被直接监听到的，像这样：

这个时候我们要把deep参数打开，不过deep很耗能，所以不推荐打开：

但是如果我们知道需要监听具体某个对象里的数据使，可以这么做不用deep属性，这就是监听对象里具体某个数据变化的方法：

生命周期函数

vue3（组合式api）相较于vue2（选项式api）生命周期的变化

onMounted函数，直接导入直接用，可以多次使用，顺序按代码顺序执行。其他函数都一样使用

父子组件通信

父传子

父：

子：

const propos = defineProps({

    message:String

})

效果：

子传父

子：

const emit = defineEmits(['get-message'])

const sendToFather =()=>{

    emit('get-message','son to father message')

}

父：

defineEmits（[]）里面可以定义多个方法，它的参数列表就是定义方法的，

然后emit（方法名称，传送的信息）

然后父接：

模板引用

就是通过ref获取dom对象或者组件实例对象。

获取ref对象或者dom必须在挂在期后所以写在onMounted(）里

既可以获得元素对象，又可以获得子组件对象

子组件对象里的元素需要在defineExpose里定义后才能被ref获取

跨组件通信（provide和inject）

想完成组件的最上级，需要在最上级组件用provide注释所需传输的数据，然后下级用inject接收，provid可以传死数据，响应式数据 还有方法等

上级：需要导入provide和inject方法

下级：inject

pinia的应用

我也不知道干啥玩意的，好像是管理vue的，把方法写在一个js里然后供组件调用。

安装pinia

首先是在vue里引入pinia，指令是

npm install pinia

大家可以去查阅具体的官方文档：安装 | Pinia 中文文档

然後在main.js里添加对pinia的使用：

计时器简单小案例

pinia具体是干啥的我开始也不太懂，作为小白后来我大概看了一下好像是取代vuex的一个东西，比如说这个计时器的例子，在js里去定义一个方法：

然后在组件里里去调用：

定义getter（充当计算属性的功能）

定义异步action

发送请求获得一个list

把list的数据渲染出来

响应式解构

数据解构需要storeToRefs

把需要的数据从pinia定义的方法里拿出来，并且保证实时刷新，不用再counterStore.count了

方法结构不需要storeToRefs