Vue3 ref/reactive响应式引用

作者：温新

时间：2021-08-22

hi，我是温新，一名PHPer

基本数据的响应式变化

在Vue3 setup函数中，有一个基本的数据在视图模板中显示。当数据发生改变时，视图所显示的数据也要随之发生变化，也就是响应式数据变化，想要达到这个效果，就必须在setup中使用ref函数。

基础数据的响应式变化使用ref()函数

<div id="app">
	<p>{{ webName }}</p>
</div>

<script>
	const app = Vue.createApp({
		setup(props, context) {
			const { ref } = Vue;
			// 需要响应的改变的数据必须使用ref函数
			let webName = ref('自如初');
			// 3s后修改数据，页面数据跟着变化
			setTimeout(() => {
				// ref接收参数并有一个value属性
				webName.value = 'https://www.ziruchu.com';
			}, 3000);

			// 暴露变量供视图使用
			return { webName }
		}
	});

	const vm = app.mount('#app');
</script>

对象/数组的响应式变化

对象或数据数据的响应式变化使用reactive函数

<div id="app">
	<p>{{ objData.webName }}</p>
	<p>{{ objData.webUrl }}</p>
</div>

<script>
	const app = Vue.createApp({
		setup(props, context) {
			// 数组或对象使用 reactive 函数
			const { reactive } = Vue;
			
			// 对象数据
			let objData = reactive({
				webName:'自如初',
				webUrl: 'https://www.ziruchu.com',
			});

			setTimeout(() => {
				objData.webName = '温新';
			}, 3000);

			// 暴露变量供视图使用
			return { objData };
		}
	});

	const vm = app.mount('#app');
</script>

readonly数据只读

若数据不想被修改，可以使用readonly函数

let objData = readonly({
    webName:'自如初',
    webUrl: 'https://www.ziruchu.com',
});

数据对象结构时响应时使用toRefs

<div id="app">
	<p>{{ webName }}</p>
	<p>{{ webUrl }}</p>
</div>

<script>
	const app = Vue.createApp({
		setup(props, context) {
			// 数组或对象使用 reactive 函数
			const { reactive, toRefs } = Vue;
			
			// 对象数据
			let objData = reactive({
				webName:'自如初',
				webUrl: 'https://www.ziruchu.com',
			});

			setTimeout(() => {
				objData.webName = '温新';
			}, 3000);

			// 数据对象结构
			let {webName, webUrl} = toRefs(objData);

			return { webName, webUrl };
		}
	});

	const vm = app.mount('#app');
</script>

使用toRefs函数，被解构的数据对象就可以直接使用解构后的变量名，而不用带上objData.来使用。

toRef使用未定义的数据

若是对象中没有这个属性，使用toRef函数。

<div id="app">
	<p>{{ webName }}</p>
	<p>{{ webUrl }}</p>
</div>

<script>
	const app = Vue.createApp({
		setup(props, context) {
			const { reactive, toRefs, toRef } = Vue;
			
			// 对象数据
			let objData = reactive({webName:'自如初'});

			// 若objData中没有webUrl，则赋值为空
			let webUrl = toRef(objData, 'webUrl');
			setTimeout(() => {
				webUrl.value = 'https://www.ziruchu.com';
			}, 3000);

			// 对象解构出webName
			let { webName } = toRefs(objData);

			return { webName, webUrl};
		}
	});

	const vm = app.mount('#app');
</script>

我是温新

每天进步一点，就一点点