vue3组合式api（reactive, ref, toRefs, watch, watchEffect）_组合式api created

Vue3 的一大特性函数 ---- setup

　　1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的

　　2、setup函数是 Composition API（组合API）的入口

　　3、在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用

二、setup函数的注意点：

　　1、由于在执行 setup函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用 data 和 methods 的变量和方法

　　2、由于我们不能在 setup函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined

　　3、setup函数只能是同步的不能是异步的

<template>
<div>
	  <h1>{{index}}</h1>
		 <h1>{{name}}</h1>
		 <button @click="changeNmae()">改变</button>
		  <button @click="changeObj()">改变obj</button>
		  <h1>{{obj.uname}}</h1>
		  <h4>{{uname}}</h4>
		  
		  <hr>
			<h1>{{num}}</h1>
			 <button @click="changeNum()">改变num</button>
			 
			 <hr>
			 <h3>computed</h3>
			 <h2>{{couter}}</h2>
			  <h2>{{fullname}}</h2>
			 
  </div>
</template>
 
 
   
<script>
  import {reactive, ref, toRefs, watch, watchEffect,computed} from 'vue'
  export default {
    name: "TabBarItem",
    data() {
      return {
         index: 'index'
      }
    },
	created() {
		
	},
	setup() {
		//======================== ref  reactive toRefs ===========================
		
		let name =ref('小四') // ref 声明简单类型的数据，并且获得响应式
		
		function changeNmae(){
			name.value = 'hehe'
			console.log(name.value)
		}
		
		let obj = reactive({    // reactive 声明数组，对象类型的数据, 并且获得响应式
		        uname: "zhangsan",
		        age: 18,
		        isSex: { sex: '女' },
		    })
		function changeObj() {
			// console.log(this)
			obj.uname = '李四'
			console.log(obj.uname)
		}
			
		//	======================== watch ===========================
		let num = ref(100) 
		let count = ref(200) 
		function changeNum() {
			// console.log(this)
			num.value = 200
			console.log(num.value)
		}
		// 监控方式(1)  监控num值的变化
		watch(num,(val,preVal)=>{ 
			//val为修改后的值,preVal为修改前的值
			console.log("num",val,preVal)
			},
			{
				//如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
				//那么首次执行，val为默认值,preVal为undefined
				immediate:true,
				//这个参数代表监听对象时，可以监听深度嵌套的对象属性
				//比如message是一个对象的话，可以监听到message.a.b.c，也就是message下的所有属性
				deep:true,
			}
		)
		// 监控方式(2)  全局监控变化的值  默认自动执行
		watchEffect(()=>{
			console.log('==watchEffect',num.value)
			console.log('####watchEffect',obj.uname)
		})
		
		//	======================== computed ===========================
		let couter = computed(() => {
		        return num.value + count.value
		      })
			  
		let fullname = computed(() => {
		        return obj.uname + obj.age +  obj.isSex.sex
		      })
	
		
 
		//使用es6扩展运算符后,失去响应式 ,通过toRefs获取响应式
		return {name,changeNmae,changeObj,...toRefs(obj),obj,num,changeNum,couter,fullname}
	},
	methods:{
		
	}
  }
</script>