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

Posted 2021-09-10 月疯

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>
		<!-- 在模板中访问时，无需通过value属性,它会自动展开 -->
		<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-setup msg="welcome">
		
	</comp-setup> -->
	<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>