Vue3学习

 

目录

组合式API

setup函数

 ref函数

reactive

 toRef

toRefs

 watch侦听器

监听ref

一个

 多个​

reactive响应式对象 

整个

单个 

 立即监听​

 watchEffect

 ref

 reactive对象

​ 停止监听器

 shollowRef和shollowReactive

 vue3组件传值

父子组件传值

 provide/inject 不用点击，进页面直接传

 点击传值给子组件

 Vuex使用

 vuex子组件向父组件传值

store中index.js

 在组件中使用计算属性取到仓库中的值

 在组件中点击按钮改变vuex中的值

简便方式直接在组件中调用同步

 声明周期函数

vue3的抽离封装 

 公用js文件

组件使用​

---

 

组合式API

setup函数

 

 ref函数

 

注意： ref一般用到基本数据类型

reactive

 

 

 和ref不同的地方，取数据时不需要。value

 console.log(obj)

 

 toRef

 

 

 

toRefs

 

 计算属性--computed

在vue3中需要引入

 

在vue3中可以写很多计算属性 

 

 watch侦听器

监听ref

一个

 多个

reactive响应式对象 

整个

 

单个 

 

 立即监听

 watchEffect

进入页面就会执行，相当于声明周期函数

 ref

 

 reactive对象

 停止监听器

 

 shollowRef和shollowReactive

 

 vue3组件传值

父子组件传值

 provide/inject 不用点击，进页面直接传

子组件

父组件

 点击传值给子组件

子组件

父组件

 

 Vuex使用

 

 vuex子组件向父组件传值

store中index.js

main.js

 在组件中使用计算属性取到仓库中的值

使用计算属性监听数据变化

 在组件中点击按钮改变vuex中的值

步骤：在组件中调用vuex的异步调用，vuex异步方法调用同步方法，在vuex的同步方法中修改值

 

  index.js

 index.js在同步调用中修改值

 组件中计算属性监听数据变化，仓库值变化，页面值也变化

简便方式直接在组件中调用同步

vue组件

 index.js

 

 声明周期函数

 

 声明周期函数要写在setup函数中，格式为箭头函数

 

数据请求一般放在onMounted中 

vue3的抽离封装 

 公用js文件

组件使用