VUE3setup响应式函数系统API详解

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>