Vue学习笔记（八）

1. 选项API

• 易于学习和使用，写代码的位置已经约定好
• 代码组织性差，相似的逻辑代码不便于复用，逻辑复杂代码多了不好阅读

2. 组合API

• 一个功能逻辑的代码组合在一起
• 需要有良好的代码组织能力和拆分逻辑能力

3. setup()

• 组合API的起点，基本组合API的代码会在这里
• 可以理解成在beforeCreate钩子执行前执行
• 函数中，不能使用this,因为还没创建好组件实例
• 模板中需要使用的数据和函数，需要在setup中返回

4. Vue3生命周期

• setup()创建实例前
• onBeforeMount()挂载DOM前
• onMount()挂载DOM后
• onBeforeUpdate()更新组件前
• onUpdate()更新组件后
• onBeforeUnmount()卸载销毁前
• onUnmount()卸载销毁后
• 可以多次使用同一个钩子函数，执行顺序和书写顺序相同

5. reactive()

• 定义复杂数据类型，使其成为响应数据

const obj=reactive({
	name:'ls',
  	age:25 
})

6. toRef()

• 从响应式数据对象中解构出来的属性数据，不再是响应式数据
• toRef()转换响应式数据包装成对象，value存放值的位置

const name=toRef(obj,'name')

7. toRefs()

• 转换响应式对象中所有属性为单独响应式数据，对象成为普通对象

8. ref()

• 定义简单数据类型，使其成为响应数据
• 在修改值，获取值的时候需要使用.value
• 在模板中使用ref申明的响应式数据，可以忽略.value

9. computed()

• 用来定义计算属性，计算属性不能改变
• 当需要依赖现有的响应式数据，并根据一定逻辑获取新的数据，需要用到computed

const newage=computed(()=>{
	return obj.age+1
})

• 计算属性高级用法，传入对象

//目的是让计算属性实现数据双向绑定
const newage=computed({
	get(){
    	return obj.age+1
    }
  	set(val){
		obj.age.value=obj.age-val
	}
})

10. watch()

• 监听数据变化

//1.监听一个ref数据
watch(age,(newage,oldage)=>{
	console.log(newage,oldage)
})
//2.监听一个reactive数据
watch(obj,(newVal,oldVal)=>{
	console.log(newVal,oldVal)
})
//3.监听多个数据的改变
watch([obj,age],()=>{
	
})
//4.监听对象中某一属性的变化
//需要写成函数返回该属性的方式才可以监听到
watch(()=>obj.name,()=>{
	
})
//5.监听对象深层
watch(obj,(new,old)=>{
},{
	deep:true,//深度监听，用于只监听对象某个属性的属性
  	immediate:true//默认执行一次
})

11. ref

• 先定义一个空的响应式数据（ref）
• setup中返回该数据，并在元素上绑定响应式数据

let domlist=[]
const setDom=(el)=>{
	domlist.push(el )
}

12. 父向子通讯

setup(props){
  	//获取父组件数据money
	console.log(props.money)
}

13. 子向父通讯

//子组件
setup(props,{emit}){
	const changeMoney=()=>{
    	emit('change-money',50)
    }
    return {changeMoney}
}
//父组件
setup(){
	const updateMoney=(newMoney)=>{
    	console.log(newMoney)
    }
}

//父组件书写
<son :money='money' @change-money='updateMoney'>
//父组件语法糖简写
<son v-model:money='money'>

14. 依赖注入

• 一个父组件，包含子组件，孙组件等好多后代组件，共享父组件数据

//父组件
setup(){
	const money=ref(100)
    const changeMoney=()=>{
    	money+=1
    }
    provide('money',money)
  	return {money}
}
//后代组件
setup(){
	const money=inject('money')
    //不能自己定义修改父组件数据的方法，需要调用父组件方法
    const changeMoney=inject('changeMoney')
    return {money,changeMoney}
}

15. mixin

• 对于相同的逻辑不同的界面，可以使用mixin
• vue3不推荐使用

//局部引入
import {follwoMixin} from './mixin.js'
export default{
	mixins:[follwoMixin]
}
//全局
app.mixin({})