Vue3.0学习——Vue3.0之组合API（Compostion Api）及Opostion Api混合使用

定义变量，定义方法

1. ref()方法

	import {ref} from 'vue'
	export default {
	    name: 'App',
		//setup 函数是组合API入口函数
		setup(){
	        // 定义了一个名称叫做count得变量，这个变量的初始值是0
			// 这个变量发生改变后，Vue会自动更新
			// ref注意点：只监听简单类型得变化,不能监听复杂类型的变化（数组/对象）
	        let count = ref(0);
	        
	        // 在组合API中，如果定义一个方法，不用定义到methods中，直接定义即可
	        function myFn() {
	            console.log(count);
	            count.value +=1
	        }
	        
	        // 注意点：在组合API中定义得方法/变量，必须用return {xxx，xxx} 暴露出去
	        return {count,myFn}
		}
	}

1) ref和reactive一样，也是实现响应式数据的方法，由于reactive方法传递的是一个对象，所以导致在企业开发中，如果我们只想监让某个变量实现响应式的时候会很麻烦，所以Vue3中提供ref方法，实现对简单值得监听

2) ref得本质还是reactive，系统会自动帮我们把ref传入得值替换为ref(x) => reactive({value:x})

3) 在Vue template中ref得值不用通过value来获取，在JS中ref得值必须用value来获取

2. reactive()方法

	import {reactive} from 'vue'
	export default {
	    name: 'App',
		setup(){
		  //解决了数据以及业务逻辑分散的问题
	      let {state,remStu} = useRemoveStudent();   //删除方法
	      let {state2,addStu} = useAddStudent(state);//添加方法
	      return {state,remStu,state2,addStu}
		}
	}
	
	function useRemoveStudent() {
		// 定义数据
	    let state = reactive({
	        stuData:[
	            {id:1,name:"x",age:10},
	            {id:1,name:"y",age:10},
	            {id:1,name:"z",age:10},
	        ]
	    })
	    // 定义方法
	    function remStu(index){
	        console.log(index)
	        state.stuData = state.stuData.filter((stu,idx) => idx !== index)
	    }
	    //将数据以及方法暴露出去
	    return {state,remStu}
	}
	
	function useAddStudent(state) {
	    let state2 = reactive({
	        stu:{
	            id:"",
		        name:"",
		        age:""
	        }
	    })
		function addStu(e) {
	        e.preventDefault();
	        const stu = Object.assign({},state2.stu);
	        state.stuData.push(stu);
	        state2.stu.id = "";
	        state2.stu.name = "";
	        state2.stu.age = "";
	    }
		
	    return {state2 , addStu}
		
	}

1) reactive是Vue3中提供的实现响应式数据的方法，在vue2中响应式数据是通过defineProperty实现的，Vue3是通过Proxy来实现的

2) retactive参数必须是对象，传递了其他对象，默认情况下界面不会更新，如果想更新，可以通过重新赋值的方式

3. ref和reactive得区别

在template中使用得是ref类型得数据，Vue会自动添加.value
在template中使用得是reactivef类型得数据，Vue不会自动添加.value

根据ref得私有属性__v_isRef是否为true来判断
isRef方法 判断是否是ref类型
isReactive方法 判断是否是reactive类型

4. Compostion Api( 组合API / 注入API )

	import {ref} from 'vue'
    export default {
        name: 'App',
        data(){
            return {
                name:"wzl"
            }
        },
        methods:{
            myFn(){
                console.log(111)
            }
        },
        setup(){
        	//在这里定义的变量，相当于把age 注入到data()里
			let age = ref(18)
			//在这里定义的方法，相当于把myFn2注入到methods里
	        function myFn2() {
                console.log('myFn2');
            }
            return {age,myFn2}
        }
    }

setup()函数执行时机

1. 在beforeCreate()和create()之间执行
2. 由于在执行setup()函数时，还没有执行create()函数，所以在setup()函数中是无法使用data和method
3. Vue为了避免我们错误地使用，直接将setup()函数中的this，修改为了undefined
4. setup()只能是同步的，不能是异步的