VUE3(setup响应式函数系统API)

墨蓝 2022-09-08 14:00 241阅读 0赞

> Vue3.0提供的一组具有响应式特性的杉树式API，以函数的形式提供  
> 1、reactive  
> reactive（）函数接收一个普通对象，返回该普通对象的响应式代理对象  
> 2、ref  
> ref（）函数接收一个参数值，返回一个响应式的数据对象。该对象只包含一个指向内部值的.value属性  
> 3、computed  
> computed（）函数用来创建计算属性，函数的返回值是一个ref的实例  
> 4、readonly
> 
> readonly（）函数接收一个对象（普通或者响应式），返回一个原始对象只读代理对象  
> 5、watch  
> watch（）函数用来监听数据的变化，从而出发特定的操作  
> 6、watchEffect  
> watchEffect（）函数接收一个函数作为参数，并立即执行该函数，同时响应式追踪其依赖，并在其依赖变更时，重新运行该函数。

reactive.vue

<template>
    	<div>
    		<p>{
       {name}}</p>
    		<button @click="name='juju'">修改name</button>
    	</div>
    </template>
    
    <script>
    	//1、导入reactive响应函数
    	import { reactive } from 'vue'
    	export default{
    		setup(){
    			//2、创建响应式对象，是一个代理对象
    			const data=reactive({
    				name:'htt',
    				age:22
    			})
    			
    			return data
    		}
    	}
    </script>
    
    <style>
    </style>

ref.vue

<template>
    	<div>
    		
    		<p>{
       { num }}</p>
    		<button @click="change">修改count</button>
    	</div>
    </template>
    
    <script>
    	//导入ref函数
    	import {ref} from 'vue'
    	export default{
    		setup(){
    			//创建响应对象
    			const num=ref(1)
    			console.log(num.value)
    			
    			const change=()=>{
    				num.value=5
    			}
    			//setup导出数据都要return，可以是函数，也可以是数据
    			return {
    				num,
    				change
    			}
    		},
    		//以后经常使用的就是setup，不是data
    		data(){
    			return{
    				
    			}
    		}
    		
    	}
    </script>
    
    <style>
    </style>

computed.vue

<template>
    	<div>
    		<p>{
       {hg}}</p>
    		<p>{
       {ss}}</p>
    	</div>
    </template>
    
    <script>
    	import {computed,ref} from 'vue'
    	export default{
    		setup(){
    			const hg=ref(1)
    			
    			//创建一个只读的计算属性
    			const ss=computed(()=>{
    				return hg.value+1
    			})
    			
    			//创建一个可读可写的计算属性
    			const pk=computed({
    				get(){
    					return hg.value+1
    				},
    				set(hg){
    					hg.value=hg
    				}
    			})
    			return {
    				hg,
    				ss,
    				pk
    			}
    		}
    	}
    </script>
    
    <style>
    </style>

readonly.vue

<template>
    	<div></div>
    </template>
    
    <script>
    	import {reactive,readonly} from 'vue'
    	export default{
    		setup(){
    			const obj =reactive({conunt:1})
    			
    			//代理了响应式对象
    			const proxy=readonly(obj)
    			
    			console.log(obj)
    			console.log(proxy)
    			//代理只读对象是不允许修改的
    			//修改原始对象时代理对象也会响应式变化
    		}
    	}
    </script>
    
    <style>
    </style>

watch.vue和watchEffect.vue

<template>
    	<div>
    		
    		<button @click="unwatch">停止监视</button>
    	</div>
    </template>
    
    <script>
    	import {watch,reactive} from 'vue'
    	export default{
    		setup(){
    			const state=reactive({count:1})
    			
    			
    		//监视数据的变化,会返回一个用于取消监视的函数
    		//当数据发生改变擦会启动监视，不会立即启动监视
    		// const unwatch=watch(() =>
    		// 	state.count,(oldValue,newValue)=>{
    		// 	console.log(oldValue,newValue)
    		// })
    		//先立即执行传入的函数
    		//当函数内依赖的数据发生变化时会再次执行函数
    		watchEffect(()=>{
    			console.log(state.count)
    		})
    		
    		return {
    			state,
    			unwatch
    		}
    			
    	}
    </script>
    
    <style>
    </style>

App.vue

<template>
    	
    	<comp-reactive></comp-reactive>
    	<comp-ref></comp-ref>
    	<comp-computed></comp-computed>
    	<comp-reonly></comp-reonly>
    	<comp-watch></comp-watch>
    </template>
    
    <script>
    /*eslint no-mixed-spaces-and-tabs: ["error", "smart-tabs"]*/
    // import CompSetup from './components/setupview'
    import CompReactive from './components/reactive.vue'
    import CompRef from './components/ref.vue'
    import CompComputed from './components/compud.vue'
    import CompReonly from './components/reonly.vue'
    import CompWatch from './components/watch.vue'
    export default {
      name: 'App',
      components: {
    	  // CompSetup,
    	  CompReactive,
    	  CompRef,
    	  CompComputed,
    	  CompReonly,
    	  CompWatch,
      }
    }
    </script>
    
    <style>
    
    </style>