setup
setup 的返回值可以是函数
data(){
return {
a:'111',
c:this.name
}
},
setup(){
let name = '1111'
return ()=> '哈哈哈'
}//结果页面就是会显示 哈哈哈
setup和 OptionsAPI关系
data能和setup能同时存在，但不建议
data能读到setup里边的数据 setup是最早的生命周期 setup比data执行的要早
setup语法糖
想要组件name 和setup用一个script 可以用一个插件 npm i vite-plugin-vue-setup-extend -D
vite.config.js 文件中 引入
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
plugins:[vue(),VueSetupExtend()
]
//然后在script写即可
<script setup name='Person234'>
ref
ref 实现对象类型响应式 深层次也是借助于reactive实现的
reactive
reactive重新分配一个对象，会失去响应式，用 Object.assign(car,{brand:‘品牌’}) 分配对象 car是个reactive对象
ref定义对象，要是重新分配对象可以直接car.value = {}
如果定义基本类型响应式数据，用ref
定义层级不深的对象数据，ref和reactive都行
定义层级深的，建议用reactive
toRefs和toRef
toRef是就是把对象类型中的每一个参数单拎出来变成ref
let age = toRef(person,‘age’)//把person里边的age解构出来
let { age,name} = person
let { age,name} = toRefs(person)
computed
有缓存
//只读
const aa = computed(()=>{
return '1111'
})let firstName = ref('zhang')
let lastName = ref('san')
//可读可写
let fullNmae = computed({
get(){return firstName + '_'+ lastName
},
set(val){//val就是fullName.value赋值拿到的，这里是'12345'console.log('set',val)let [str1,str2] = val.split('_')firstName.value = str1lastName.value = str2}
})
这时候就可以 fullNmae.value = 'li-si'//得有set(){}
watch
vue3中watch只能监视以下四种数据：
1、ref定义的数据
2、reactive定义的数据
3、函数返回的一个值（getter函数->能返回一个值的函数）
4、一个包含上述内容的数组
//监听基础类型的ref,不需要.value
let count = ref(0)
watch(count,(newVal,oldVal)=>{console.log(newVal,oldVal)
})
//情况一：监听对象类型的ref,他只是监听对象的地址值，
let person = ref({
age:12,
name:'张三'
})
watch(person,(newVal,oldVal)=>{
console.log(newVal,oldVal)
//更改person 属性 person.value.name='11' 并不会打印
//更改person整个值才会走watch person.value = { name:'11',age:10}
})
//-----------------------------------------------------------
//情况二：若想监听ref对象中的属性变化，使用deep:true
function changeName() {person.value.name = '李四'
}
function changeAge() {person.value.age = 20
}
function changePerson() {person.value = {name: '王五',age: 20}
}
watch(person,(newVal,oldVal)=>{console.log(newVal,oldVal)
},
{deep:true
}
)
//会出现情况是:
//单纯更改其中参数，监听打印的是Proxy(Object) {name: '李四', age: 20} Proxy(Object) {name: '李四', age: 20}
//可以假设成person的{name:xx,age:xx}是一个房子，改其中的参数只是改房子里边的东西，房子没变，所以每次监听房子新值和旧值一样
//更改整个person参数才会是Proxy(Object) {name: '王五', age: 20} Proxy(Object) {name: '李四', age: 20}
//---------------------------------------------------------
//情况三：监视reactive定义的对象数据，更改参数和整个对象都会受到监视，默认是开启深度监视的,而且用deep:false是不可以的
//但是打印新值和旧值是一样的，因为房子没变
let obj = reactive({a:{b:{c: 10}}
})
function changeTest() {obj.a.b.c = 20
}
watch(obj,(newVal,oldVal)=>{console.log('obj变化了',newVal,oldVal)
},
{deep:true
}
)
//-------------------------------------------------------------------------
//情况四：监视ref或reactive定义的【对象类型】数据中的某个属性，注意点如下：
//1、若该属性值不是【对象类型】，需要写成函数形式
//2、若该属性值依然是对象类型，可直接编，也可写成函数，不过建议写成函数
let person = reactive({name:'张三',car:{c1:'大众'，c2:'比亚迪',}
})
function changeName() {person.name += '~'
}
//监视的reactive对象中属性不是对象类型，得用函数
watch(()=> person.name,(newVal,oldVal)=>{console.log('person.name变化了',newVal,oldVal)
}
)
//每次person.name变化watch都监听，且新值和旧值不一样
//监听reactive对象中属性为对象时建议也是函数
//这时候直接修改person.car = { c1:'雅迪'c2:'爱玛'}也能监听到
watch(()=> person.car,(newVal,oldVal)=>{console.log('person.name变化了',newVal,oldVal)
},{
deep:true
}
)
//-------下面这样修改car里边参数能监听比如更改c1和c2,但是直接修改car不会监听到，可以这么写但不建议----
watch(person.car,(newVal,oldVal)=>{console.log('person.name变化了',newVal,oldVal)
})
//监视上述的多个数据，（把他们放到同一个数组里）
watch([()=>person.name,()=>person.car.c1],(newVal,oldVal)=>{console.log('person.name变化了',newVal,oldVal)
})
//打印值也是数组['张三~'，'奔驰']
watchEffect
相比于watch,watchEffect不用特意指出监听的是哪个参数，且会立即运行一个函数，同时响应的追踪其依赖
比如同时监听多个参数时相对来说好一点，因为不用标注监听哪个参数
<script setup>
import { watchEffevt } from 'vue'
const count = ref(1)
watchEffect(()=>{
console.log(count.value)//当count变化时就会打印
})
</script>
标签的ref
<h2 ref="title2">获取元素</h2>
import {ref} from 'vue'
//创建一个ref对象，用于存储ref标记的内容 创建名称要和元素ref=""中的名称一样
let title2 = ref()
//获取值用title2.value,即使两个vue文件中ref名称一样也不会冲突//给组件加ref
<Person ref='person'/>
let person = ref()
//如何拿到子组件东西，需要子组件用defineExpose
//Person里边
import { defineExpose } from 'vue'//其实也不用引入
let a = ref(0)
let b = ref(1)
defineExpose({a,b})
props
//父<PersonInfo msg="aaa" />
//可能最新vue3不需要引入defineProps defineEmit 可以直接使用
import { defineProps } from 'vue'
//接受+同时将数据保存起来
let props = defineProps({msg: String
})
console.log(props.msg)//aaa
//情况一：只接受
defineProps(['msg'])
//情况二：接受+限制类型 Persons是自定义的type
defineProps<{list: Persons}>()
//情况三：接受list+限制类型+限制必要性+指定默认值
interface PersonInter {
name:string,
id:string,
age:number
}
type Persons = Array<PersonInter>import { withDefaults } from 'vue'
const props = withDefaults(defineProps<Persons>(), {name: '',id: '',age: 10}}
//给数组设置默认也需要加上箭头函数
const props = withDefaults(defineProps<{list?:Persons}>(), {list:()=>[{id:'123',name:'张三',age:10}]})
//情况四：使用箭头函数声明
const props = defineProps({List: {type: Array,required: true,default: () => [{ name: '文件1' }, { name: '文件2' }]}
provide和inject
**方便props多层级透传**
有一些多层级嵌套的组件，形成了一棵巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去,这样使用也很麻烦，这时候就可以使用provide和inject
//祖先组件中使用provide
<script setup>
import { provide } from 'vue'
provide(/* 注入名 */ 'age', /* 值 */ '11')
//例子
provide('age', '11')
</script>
//子组件中用inject使用父组件提供的值
<script setup>
import { inject } from 'vue'
const age = inject('age')
console.log('age', age) //输出 11
</script>
生命周期
vue2和vue3对比
子组件先挂载完毕（onMounted），父再挂载完毕
自定义hooks
多个页面需要同一个功能就可以使用hooks,而且hooks里边能使用钩子例如onMounted等，还能用computed
useSum.ts
import { ref } from 'vue'
export function useSum() {const sum = ref(0)function add() {sum.value += 1}return { sum, add }
}
import { useSum } from 'xxx'
const { sum, add } = useSum()
