VUe3.0基础-setup函数，生命周期等

2022年6月14日10:17:23

6.setup的两个注意点

setup执行的时机
- 在beforeCreate之前执行一次，this是undefined。
setup的参数
- props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
- context：上下文对象
  - attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于this.$attrs。
  - slots: 收到的插槽内容, 相当于this.$slots。
  - emit: 分发自定义事件的函数, 相当于this.$emit。

main.js

<template><Demo @hello="showHelloMsg" msg="你好啊" school="尚硅谷"><template v-slot:qwe><span>尚硅谷</span></template><template v-slot:asd><span>尚硅谷</span></template></Demo></template><script>import Demofrom'./components/Demo'exportdefault{
		name:'App',
		components:{Demo},setup(){functionshowHelloMsg(value){alert(`你好啊，你触发了hello事件，我收到的参数是:${value}！`)}return{
				showHelloMsg}}}</script>

<template><h1>一个人的信息</h1><h2>姓名：{{person.name}}</h2><h2>年龄：{{person.age}}</h2><button @click="test">测试触发一下Demo组件的Hello事件</button></template><script>import{reactive}from'vue'exportdefault{
		name:'Demo',
		props:['msg','school'],
		emits:['hello'],setup(props,context){// console.log('---setup---',props)// console.log('---setup---',context)// console.log('---setup---',context.attrs) //相当与Vue2中的$attrs// console.log('---setup---',context.emit) //触发自定义事件的。
			console.log('---setup---',context.slots)//插槽//数据let person=reactive({
				name:'张三',
				age:18})//方法functiontest(){
				context.emit('hello',666)}//返回一个对象（常用）return{
				person,
				test}}}</script>

<template><h1>一个人的信息</h1>
	 姓：<input type="text" v-model="person.firstName">
	 名：<input type="text" v-model="person.lastName"><br><span>{{person.fullName}}</span><br>
	 全名：<input type="text" v-model="person.fullName"></template><script>import{reactive,computed}from'vue'exportdefault{
		name:'Demo',// computed:{//    fullName(){// 	   return this.person.firstName+"-"+this.person.lastName//    }// },setup(){let person=reactive({
				firstName:'张',
				lastName:'三'})// person.fullName=computed(()=>{// 	return person.firstName+"-"+person.lastName// })

			person.fullName=computed({get(){return person.firstName+"-"+person.lastName},set(value){const imgArr=value.split('-')
					person.firstName=imgArr[0]
					person.lastName=imgArr[1]}})return{
				person}}}</script>

VUe3.0基础-setup函数，生命周期等

7.计算属性与监视

1.computed函数

与Vue2.x中computed配置功能一致

写法

import{computed}from'vue'setup(){...//计算属性——简写let fullName=computed(()=>{return person.firstName+'-'+ person.lastName})//计算属性——完整let fullName=computed({get(){return person.firstName+'-'+ person.lastName},set(value){const nameArr= value.split('-')
            person.firstName= nameArr[0]
            person.lastName= nameArr[1]}})}

2.watch函数

与Vue2.x中watch配置功能一致

两个小“坑”：

监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。
监视reactive定义的响应式数据中某个属性时：deep配置有效。

//情况一：监视ref定义的响应式数据watch(sum,(newValue,oldValue)=>{
	console.log('sum变化了',newValue,oldValue)},{immediate:true})//情况二：监视多个ref定义的响应式数据watch([sum,msg],(newValue,oldValue)=>{
	console.log('sum或msg变化了',newValue,oldValue)})/* 情况三：监视reactive定义的响应式数据
			若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
			若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
*/watch(person,(newValue,oldValue)=>{
	console.log('person变化了',newValue,oldValue)},{immediate:true,deep:false})//此处的deep配置不再奏效//情况四：监视reactive定义的响应式数据中的某个属性watch(()=>person.job,(newValue,oldValue)=>{
	console.log('person的job变化了',newValue,oldValue)},{immediate:true,deep:true})//情况五：监视reactive定义的响应式数据中的某些属性watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
	console.log('person的job变化了',newValue,oldValue)},{immediate:true,deep:true})//特殊情况watch(()=>person.job,(newValue,oldValue)=>{
    console.log('person的job变化了',newValue,oldValue)},{deep:true})//此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效

<template><h2>当前求和为：{{sum}}</h2><button @click="sum++">点我+1</button><hr><h2>当前的信息为：{{msg}}</h2><button @click="msg+='！'">修改信息</button><hr><h2>姓名：{{person.name}}</h2><h2>年龄：{{person.age}}</h2><h2>薪资：{{person.job.j1.salary}}K</h2><button @click="person.name+='~'">修改姓名</button><button @click="person.age++">增长年龄</button><button @click="person.job.j1.salary++">涨薪</button></template><script>import{ref,reactive,watch}from'vue'exportdefault{
		name:'Demo',setup(){//数据let sum=ref(0)let msg=ref('你好啊')let person=reactive({
				name:'张三',
				age:18,
				job:{
					j1:{
						salary:20}}})//情况一：监视ref所定义的一个响应式数据/* watch(sum,(newValue,oldValue)=>{
				console.log('sum变了',newValue,oldValue)
			},{immediate:true}) *///情况二：监视ref所定义的多个响应式数据/* watch([sum,msg],(newValue,oldValue)=>{
				console.log('sum或msg变了',newValue,oldValue)
			},{immediate:true}) *//* 
				情况三：监视reactive所定义的一个响应式数据的全部属性
						1.注意：此处无法正确的获取oldValue
						2.注意：强制开启了深度监视（deep配置无效）
			*//* watch(person,(newValue,oldValue)=>{
				console.log('person变化了',newValue,oldValue)
			},{deep:false}) //此处的deep配置无效 *///情况四：监视reactive所定义的一个响应式数据中的某个属性/* watch(()=>person.name,(newValue,oldValue)=>{
				console.log('person的name变化了',newValue,oldValue)
			})  *///情况五：监视reactive所定义的一个响应式数据中的某些属性/* watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
				console.log('person的name或age变化了',newValue,oldValue)
			})  *///特殊情况/* watch(()=>person.job,(newValue,oldValue)=>{
				console.log('person的job变化了',newValue,oldValue)
			},{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效 *///返回一个对象（常用）return{
				sum,
				msg,
				person}}}</script>

<template><h2>当前求和为：{{sum}}</h2><button @click="sum++">点我+1</button><hr><h2>当前的信息为：{{msg}}</h2><button @click="msg+='！'">修改信息</button><hr><h2>姓名：{{person.name}}</h2><h2>年龄：{{person.age}}</h2><h2>薪资：{{person.job.j1.salary}}K</h2><button @click="person.name+='~'">修改姓名</button><button @click="person.age++">增长年龄</button><button @click="person.job.j1.salary++">涨薪</button></template><script>import{ref,reactive,watch}from'vue'exportdefault{
		name:'Demo',setup(){//数据let sum=ref(0)let msg=ref('你好啊')let person=ref({
				name:'张三',
				age:18,
				job:{
					j1:{
						salary:20}}})

			console.log(person)watch(sum,(newValue,oldValue)=>{
				console.log('sum的值变化了',newValue,oldValue)})watch(person,(newValue,oldValue)=>{
				console.log('person的值变化了',newValue,oldValue)},{deep:true})//返回一个对象（常用）return{
				sum,
				msg,
				person}}}</script>

3.watchEffect函数

watch的套路是：既要指明监视的属性，也要指明监视的回调。
watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
watchEffect有点像computed：
- 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
- 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。
```
//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。watchEffect(()=>{const x1= sum.valueconst x2= person.age
    console.log('watchEffect配置的回调执行了')})
```

8.生命周期

vue2.x的生命周期 VUe3.0基础-setup函数，生命周期等

vue3.0的生命周期 VUe3.0基础-setup函数，生命周期等

Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：
- beforeDestroy改名为beforeUnmount
- destroyed改名为unmounted
Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
- beforeCreate===>setup()
- created=======>setup()
- beforeMount ===>onBeforeMount
- mounted=======>onMounted
- beforeUpdate===>onBeforeUpdate
- updated =======>onUpdated
- beforeUnmount ==>onBeforeUnmount
- unmounted =====>onUnmounted

<template><h2>当前求和为：{{sum}}</h2><button @click="sum++">点我+1</button></template><script>import{ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted}from'vue'exportdefault{
		name:'Demo',setup(){
			console.log('---setup---')//数据let sum=ref(0)//通过组合式API的形式去使用生命周期钩子onBeforeMount(()=>{
				console.log('---onBeforeMount---')})onMounted(()=>{
				console.log('---onMounted---')})onBeforeUpdate(()=>{
				console.log('---onBeforeUpdate---')})onUpdated(()=>{
				console.log('---onUpdated---')})onBeforeUnmount(()=>{
				console.log('---onBeforeUnmount---')})onUnmounted(()=>{
				console.log('---onUnmounted---')})//返回一个对象（常用）return{sum}},//通过配置项的形式使用生命周期钩子//#regionbeforeCreate(){
			console.log('---beforeCreate---')},created(){
			console.log('---created---')},beforeMount(){
			console.log('---beforeMount---')},mounted(){
			console.log('---mounted---')},beforeUpdate(){
			console.log('---beforeUpdate---')},updated(){
			console.log('---updated---')},beforeUnmount(){
			console.log('---beforeUnmount---')},unmounted(){
			console.log('---unmounted---')},//#endregion}</script>

打点

<template><h2>当前求和为：{{sum}}</h2><button @click="sum++">点我+1</button><hr><h2>当前点击时鼠标的坐标为：x：{{point.x}}，y：{{point.y}}</h2></template><script>import{ref}from'vue'import usePointfrom'../hooks/usePoint'exportdefault{
		name:'Demo',setup(){//数据let sum=ref(0)let point=usePoint()//返回一个对象（常用）return{sum,point}}}</script>

import{reactive,onMounted,onBeforeUnmount}from'vue'exportdefaultfunction(){//实现鼠标“打点”相关的数据let point=reactive({
		x:0,
		y:0})//实现鼠标“打点”相关的方法functionsavePoint(event){
		point.x= event.pageX
		point.y= event.pageY
		console.log(event.pageX

6.setup的两个注意点

7.计算属性与监视

1.computed函数

2.watch函数

3.watchEffect函数

8.生命周期

热门文章

登录 找回密码

登录找回密码