VUE从入门到精通二：ref、reactive、computed计算属性、watch监听、组件之间的通信
目录
一、ref、reactive创建响应式对象
1、ref()
2、reactive()
3、ref和reactive的区别
二、computed计算属性
1、什么是计算属性computed
2、计算属性computed和函数方法的区别
3、计算属性computed的优势
三、watch监听函数
1、什么是watch？
2、基本语法
3、深度监听
4、使用字符串路径监听嵌套属性
5、动态添加watcher
6、立即执行watcher
7、一次性监听
8、停止watcher
9、watch vs watchEffect监听方式对比
10、watch与computed的区别
11、watch vue3与vue2的对比
12、性能优化建议
13、完整示例
四、组件之间的通信
1、Props（父传子）
2、Emit（子传父）
3、Provide / Inject（祖先传后代）
4、Vuex全局事件总线（状态管理）
一、ref、reactive创建响应式对象
1、ref()
在Vue 3中，ref是一个函数，用于创建一个响应式引用。它可以定义基本数据类型（如字符串、数字、布尔值等）。虽然也可用于创建对象和数组，但更推荐使用reactive。使用ref时，需要通过.value属性来访问和修改数据。
const copy_address_type = ref('') // 地址同步文案
const exemption_fax = ref(0.00) //消费税
const exemption_no_show = ref(false)2、reactive()
reactive它更适用于创建对象和数组。reactive会将整个对象或数组转换为响应式的，这意味着对象或数组中的每个属性都会被代理。
const form_data = reactive({id: '', type:'', first_name: '',last_name: '',email: '',phone: '',institution: '',postcode: '',address: '',city: '',state_input: '',state: '',country: '', set_copy_address: ''
})
const country_data = ref([])3、ref和reactive的区别
a.数据类型：ref适用于基本数据类型及复杂对象，而reactive主要用于复杂对象及嵌套数据结构。
b.访问方式：ref通过.value属性访问，而reactive直接通过属性访问。
c.响应性追踪：ref追踪单个独立的引用，reactive追踪整个对象及其内部属性。
d.可变性：ref的引用值可以重新赋值，而reactive对象本身是不可重新赋值的，只能修改其内部属性。
二、computed计算属性
1、什么是计算属性computed
computed是用于基于其他响应式数据动态计算新数据的工具，具有缓存机制，仅在依赖数据变化时重新计算，可显著提升性能，如果依赖的数据不变化，computed永远不会改变。
核心特性
依赖缓存：仅在依赖数据（如响应式引用）变化时重新计算，避免重复执行。
声明式定义：通过computed函数定义，支持复杂逻辑复用。
性能优化：减少模板渲染时的计算开销，提升渲染效率。
<template><div>{{ double }}</div><input v-model="count" />
</template><script setup>import { ref, computed } from 'vue';const count = ref(1);const double = computed(() => count.value * 2);
</script>上面的例子，当文本框的count发生改变时，double数据也会发生变化。
2、计算属性computed和函数方法的区别
function doubleFunc(count) {let double = count * 2return double}若我们将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要 author.books 不改变，无论多少次访问 double 都会立即返回先前的计算结果，而不用重复执行doubleFunc函数。
这也很好的解释了下面的计算属性永远不会更新，因为 Date.now() 并不是一个响应式依赖，它不会变化。
const now = computed(() => Date.now())3、计算属性computed的优势
A.简洁高效：通过计算属性computed可以简洁高效地实现基于其他属性计算的属性，避免了重复计算和代码冗余。
B.响应式更新：计算属性computed会自动响应依赖的变化而更新，保持界面和数据的同步。
C.缓存机制：计算属性computed会缓存计算结果，只有在相关依赖发生改变时才会重新计算，提高了性能和效率。
三、watch监听函数
1、什么是watch？
watch是Vue中用于监听数据的变化并执行相应的操作。
当被监听的数据发生变化时，会触发一个回调函数，我们可以在这个回调函数中执行一些逻辑操作。
watch适用于需要在数据变化时执行异步或较复杂的场景。
2、基本语法
export default {setup() {const count = ref(0);watch(count, (newVal, oldVal) => {console.log(`count changed from ${oldVal} to ${newVal}`);});return { count,};}
};3、深度监听
对于对象或数组的监视，默认情况下，Vue不会递归地监视对象内部属性的变化。如果你需要深度监视，vue2中可以设置deep选项为true。Vue3中你可以使用watchEffect或者watch函数，并通过提供一个回调函数来访问和监视这些深层属性。
Vue2深度监听
export default {data() {return {user: {name: '张三',age: 25}}},watch: {user: {handler(newValue, oldValue) {console.log('user对象变化了', newValue, oldValue)},deep: true // 开启深度监听}}
}VUE3深度监听
import { ref, watchEffect } from 'vue';const obj = ref({nested: {prop: 'value'}
});watchEffect(() => {console.log(obj.value.nested.prop); // 访问深层属性
});// 更新深层属性时，控制台将显示新值
obj.value.nested.prop = 'new value';深度监听原理：
4、使用字符串路径监听嵌套属性
const city = computed(() => state.user.address.city);
watch(city, (newValue, oldValue) => {console.log(`City changed from ${oldValue} to ${newValue}`);
});5、动态添加watcher
如果你需要在组件的生命周期内动态添加watcher，可以使用Vue实例的$watch方法
export default {mounted() {this.$watch('message', (newVal, oldVal) => {console.log(`message changed from ${oldVal} to ${newVal}`);});}6、立即执行watcher
默认情况下，watch只会在数据变化时触发回调函数，而不会在初始化时执行。
如果需要在初始化时就执行一次回调函数，可以设置immediate: true。
watch(() => obj.value.nested.prop, // 监视深层属性(newValue, oldValue) => {console.log(`Prop changed from ${oldValue} to ${newValue}`);},{ immediate: true } // 立即执行一次回调
);7、一次性监听
可以使用once: true选项来设置只监听一次变化
// 使用 once 选项让 watch 只监听一次
watch(count, (newValue, oldValue) => {console.log(`Count changed from ${oldValue} to ${newValue}`);
}, { once: true });8、停止watcher
当你使用$watch方法添加watcher时，可以通过返回的取消函数来停止watcher：
const count = ref(0);
let stopWatch;
stopWatch = watch(count, (newVal, oldVal) => {console.log(`Count changed from ${oldVal} to ${newVal}`);
});
onUnmounted(() => {stopWatch(); // 确保在组件卸载时停止watcher
});9、watch vs watchEffect监听方式对比
watch需要明确指定要监听的数据源，而watchEffect会自动收集其内部所使用的所有响应式依赖。
watch可以访问被监听状态的前一个值和当前值，而watchEffect只能访问当前值。
watchEffect会在组件初始化时立即执行一次，相当于设置了immediate: true的watch。
const count = ref(0)
const message = ref('Hello')// watchEffect会自动监听回调函数中使用的所有响应式数据
watchEffect(() => {console.log(`count: ${count.value}, message: ${message.value}`)
})
// 等价于以下watch写法
watch([count, message], ([newCount, newMessage]) => {console.log(`count: ${newCount}, message: ${newMessage}`)
}, { immediate: true })10、watch与computed的区别
| 特性 | watch | computed |
| 用途 | 监听数据变化并执行副作用 | 计算并返回新值 |
| 缓存 | 无缓存机制 | 有缓存，只在依赖变化时重新计算 |
| 返回值 | 无返回值 | 有返回值 |
| 适用场景 | 数据变化时执行异步操作或复杂逻辑 | 依赖其他数据计算出新值 |
| 执行时机 | 数据变化后执行 | 依赖变化时立即计算新值 |
11、watch vue3与vue2的对比
// Vue 2 选项式 API
watch: {user: {handler(newVal) { /*...*/ },deep: true}
}// Vue 3 组合式 API（更灵活）
const user = reactive({/*...*/})
watch(user, (newVal) => {/*...*/}, { deep: true })12、性能优化建议
避免过度深度监听：只对必要对象开启
使用精确监听路径
watch(() => user.address.city, (newCity) => {...})及时清理监听
const stopWatch = watch(...)
onUnmounted(stopWatch) // 组件卸载时停止监听13、完整示例
const user = reactive({id: 1,info: {name: '张三',address: {city: '北京',street: '朝阳区'}}
})// 深度监听整个用户对象
watch(user,(newUser) => {console.log('用户信息已修改，自动保存...')autoSave(newUser)},{ deep: true, immediate: true }
)// 精确监听城市变化
watch(() => user.info.address.city,(newCity) => {updateMap(newCity)}
)四、组件之间的通信
1、Props（父传子）
父组件通过props向下传递数据给子组件。这是最常见的父子组件通信方式。
父组件
<template><ChildComponent :message="parentMessage" />
</template><script setup>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';const parentMessage = ref('Hello from parent');
</script>子组件
<template><div>{{ message }}</div>
</template><script setup>
defineProps({message: String
});
</script>2、Emit（子传父）
子组件通过emit向父组件发送事件和数据。
子组件
<template><button @click="sendMessage">Send Message</button>
</template><script setup>
import { defineEmits } from 'vue';const emit = defineEmits(['updateMessage']);function sendMessage() {emit('updateMessage', 'Hello from child');
}
</script>父组件
<template><ChildComponent @updateMessage="handleMessage" />
</template><script setup>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';const childMessage = ref('');
function handleMessage(msg) {childMessage.value = msg;
}
</script>3、Provide / Inject（祖先传后代）
provide和inject可以用于跨多级组件传递数据，非常适合在深层嵌套的组件结构中通信。
祖先组件
<template><DescendantComponent />
</template><script setup>
import { provide, ref } from 'vue';
import DescendantComponent from './DescendantComponent.vue';const message = ref('Hello from ancestor');
provide('message', message); // 提供数据给后代组件使用
</script>后代组件
<template><div>{{ message }}</div>
</template><script setup>
import { inject } from 'vue';
const message = inject('message'); // 注入数据从祖先组件接收数据
</script>4、Vuex全局事件总线（状态管理）
对于更复杂的应用，可以使用Vuex进行状态管理，实现任意跨组件的通信。Vuex提供了一个集中存储管理应用所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
使用：
第一步：#src/store/index.js 创建vuex模块文件，开始使用vuex
在一个模块化的打包系统中，您必须显式地通过 `Vue.use()` 来安装 Vuex：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)第二步：#实例化Vuex.store ，并进行相关配置
export default new Vuex.Store({state: {//存储状态},mutations: {//变更store中的状态},actions: {//类似于mutation,//action提交的是mutation,而不是直接变更状态//action可以包含异步操作},getters:{//state的派生状态 },modules: {//将store分割成模块}
})第三步：#在main.js中，vue实例对象中注册store
import store from './store'
new Vue({store,render: h => h(App)
}).$mount('#app')每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。