目录

1、计算属性computed，一定要return值

（1）案例，输入框输入信息，自动算总价

2、watch侦听器

3、组件通信

（1）父传子

（2）子传父

（3）组件的双向绑定使用v-model

4、路由

5、vuex store

6、路由导航守卫

7、ref属性，使用defineExpose暴露子组件中的内容

8、watchEffect:懒执行，当数据变化的时候执行

9、生命周期

10、注入 provide inject

11、项目改造使用组合式api

12、Pinia状态管理

（1）使用

1、计算属性computed，一定要return值

1.引入computed from 'vue'
2.定义一个方法const doblue = computed(()=>{return count.value*2} )
3.模板插值doblue

（1）案例，输入框输入信息，自动算总价

1.input绑定<input v-model="inputValue"><button @click='add'>添加
2.实现响应式数据<script>const inputValue = ref('')//定义一个原数组//原数组const list = reactive([{name:"java",price:18},{name:"vue",price:28},])const add = ()=>{list.push({name:inputValue.value,price:18})}    //定义计算属性const totalPrice = computed( ()=>{let sum = list.reduce((pre,current)=>pre + current.price,0 )return sum.toFixed(2)})</script>

2、watch侦听器

1.引入watch from 'vue'
2.写入要在侦听的数据在watch中let message = ref('heell')let reverseMsg =ref('')watch(message,()=>{//字符串反转//先将字符串用split方法转为数组，使用数组的revers方法，再转为字符串reverseMsg.value=message.value.split('').reverse().join()},{immediate:true}) //立即监听

3、组件通信

（1）父传子

1.父组件中引入子组件import Son from ''
2.script标签中使用了setup，不需要注册子组件了直接使用<template><Son><Son>
3.父组件的值传入子组件定义父组件const tilte = ref('我是父组件')
4.在父组件中使用:属性名=性值绑定:title = 'title' //第二个title是要传入的值
5.在子组件中使用方法定义接收的参数
defineProps({title:{type:String,defult:''}})
6.模板插值中使用{{title}}

（2）子传父

1.子组件绑定一个方法<son @send-message = "sendMessage">
2.使用方法const msg = ref('')const sendMessage =(message)=>{msg.value = message}
3.子组件中触发方法<button @click="sendMessage">发送消息
4.使用定义方法const emit = defineEmits
4.定义方法const sendMessage = ()=>{emit('send-message','传递的参数')}

（3）组件的双向绑定使用v-model

1.父组件使用子组件的地方绑定<Child v:model:modelValue='user.name' v-model:age='user.age'></Child>
2.绑定的值const user = reactive({name:"jack",age:18})
3.子组件去接收值<button @click='updateDate'>更新数据       
</button>
<script>defineProps({modelValue:{type:String,default:''},age:{type:Number,default:0}})//注册更新modelvalue值的事件const emit = defineEmits(['update:modelValue'，'update:age//触发值把修改的值传过去const updateDate = (>{emit('update:modelValue'，'修改的值')emit('update:age，'20')}</script>

4、路由

1.引入<script>import{useRouter} from 'vue-router'
2.使用const onLogin = ()=>{//要跳转的位置router.push({path:'/'})}

5、vuex store

1.引入import {useStore} from 'vuex'
2.const store = useStore()

6、路由导航守卫

路由在进行切换的时候，可以做一些拦截的钩子函数

1.引入import {onBeforeRouteLeave,onBeforeRouteUpdate} from 'vue-router'
2.使用onBeforeRouteLeave((to,from,next)=>{} )

7、ref属性，使用defineExpose暴露子组件中的内容

1.在父组件中使用子组件的地方定义ref = 'sonRef'
2.在父组件中定义const sonRef = ref(null) //响应式属性名和ref属性的名称必须相同
3. <button @clikck="getSon"></button>
4.使用方法去获取ref
const getSon = ()>{console.log(sonRef.value)
}
5.需要在子组件中暴露在父组件中使用的属性和方法<script setup>defineExpose({name:"jack",age:24})</script>

8、watchEffect:懒执行，当数据变化的时候执行

1.引入import watchEffect from
watchEffect(async ()=> {const response = await fetch(url.value)data.value = await responese.json()
})

9、生命周期

1.引入生命周期钩子函数import {onMounted,onUpdated } from 'vue'
2.挂载mountedonMounted(()=>{})
3.更新onUpdated( ()=>{})

10、注入 provide inject

1.引入import {provide,}
2.使用provide('userProvide',{name:'jack',age:18})
3.在子组件中使用import {inject} from 'vue'
const user =inject('userProvide')

11、项目改造使用组合式api

1.首先在<script setup>
2.取消components注册
3.使用响应式数据const user = reactive({username:'',pasword:''})const rules = reactive({//原本的规则})
4.methods中的方法const 方法名 = async ()=>{//原本的方法，方法中的this记得删掉}

12、Pinia状态管理

1.Pina没有mutations
2.Actions支持同步和异步
3.没有模块的嵌套结构

（1）使用

1.安装npm i pinia
2.创建stores文件夹,index.tsimport {createPinia} from 'pinia'
3.创建实例const store = createPinia()
4.暴露出去export default store
5.在main.ts中集成引入storeimport store form ''
6.集成app.use(store)
7.在store文件夹中定义一个userimport {defineStore} from 'pinia'export const userStore = defineStore('user',{state:()=>{return{user:{}}},actions:{saveUser(user){this.user = user}},getters:{user:(state) = >state.user}})
8.在需要的页面引入Impor userStore