05-计算属性与侦听属性

计算属性

如果插值表达式中的代码过长或者逻辑较为复杂，不仅难以理解，也不方便维护。当遇到逻辑比较复杂的时候，官方不推荐使用插值表达式，而是使用计算属性把逻辑复杂的代码进行分离。

<template>
	<p>{{ computedName }}</p>
</template>
<script>
	import {reactive, toRefs, computed} from 'vue'
	
	export default {
		setup(){
			const state = reactive({
				msg: "hello world"
			})
			const computedName = computed(() => {
				return state.msg.split(' ').reverse().join()
			});
			return {
				...toRefs(state),
				computedName
			}
		}
	}
</script>

使用步骤

• 1.从vue里面引入import {computed} from 'vue'
• 2.作为一个函数，可以监听人一个响应式数据的变化，并自动运算之后返回计算结果
  • const 计算属性名 = computed(() => { return 计算属性值 })

与普通方法区别

• computed具有缓存功能，系统初始化的时候调用一次，当计算属性依赖的响应式数据发生变化时，会被再次调用
• 方法只有在事件触发的时候才会被调用一次
• 当然方法也可以实现和计算属性一样的效果，计算属性的存在是基于依赖缓存设计的。
• 使用计算属性还是方法取决于是否需要更具响应式数据自动更新视图

<template>
	请输入书籍关键字：
	<input type="text" v-model="mytext" /><p></p>
	查询结果：
	<ul>
		<li v-for="(item, index) in computedList" :key="index">
			{{ item }}
		</li>
	</ul>
</template>
<script>
	import { reactive, toRefs, computed, onMounted} from 'vue'
	export default {
		setup(){
			const state = reactive({
				mytext: '',
				list: []
			})
			// 生命周期钩子函数
			onMounted(() => {
				/**
				 * 异步导入数据
				 * test.json的数据结构
				 * {
				 * 		"list": ["", "", "", "", ""]
				 * }
				 */
				fetch('/test.json')
					.then(res => res.json())
					.then(res => {
						state.list = res.list
					})
			})
			const computedList = computed(() => {
				const newList = state.list.filter(item => item.includes(state.mytext))
				return newList
			})
			return {
				...toRefs(state),
				computedList
			}
		}
	}
</script>

侦听属性

vue提供了一种通用的方式来观察和响应当前活动的数据变动，称之为侦听属性。
当需要在数据变化时执行异步或开销较大的操作时，是有用的。
通过watch函数来实现，自带两个变量：

• 当使用reactive定义的状态数据时，两个变量都是函数；当然也可以侦听ref定义的数据
• 变量：
  • 第一个函数是所侦听变量的返回函数，当该函数值发生变化，立即出发watch函数
  • 第二个是回调函数，当触发该侦听watch函数后执行什么操作的函数

import { watch } from 'vue'
// 语法格式1
const state = reactive({
	watchData: '',
	...
})
watch(() => state.watchData, () => {
	// 后续处理
})

// 语法格式2
const watchData = ref('')
watch(watchData, () => {
	// 后续处理
})

// 类似vue2写法
const state = ref(0)
watch(state, (newValue, oldValue) => {
	console.log(`原值${oldValue}`);
	console.log(`新值${newValue}`);
})

其他

• 在vue3.0中已经不再支持vue2.0的过滤器，可以采用普通方法实现；