Vue3 项目开发常用知识点梳理-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40505914/article/details/134247998

本文详细解析了Vue中computed与watch的区别，以及在实际项目中的应用场景。涵盖了组件间的父子通信、兄弟组件和爷孙组件的交互，以及组件生命周期的各个阶段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

computed 和 watch的区别和使用场景

基本上能用computed的，watch也能用，但是有的情况，只能用computed，而有的情况需要用watch。

computed:计算属性，能立即返回一个你需要的计算属性，要返回值。一般用来获取实时更新的信息，下拉列表，可选项。

computed 一般用来获取实时更新的缓存内容，如cookies,session,vuex里面的内容，具体的：用户姓名，昵称，根据不同权限判断初始化加载数据大小

watch也能计算属性，能监听对象里属性的变化，立即监听加{immediate：true}，深度监听加{deep: true}，可以异步响应，没有返回值。一般用来监听某个属性变化后，进行事件处理。

比如用watch 做响应式表单校验，动态表单渲染，监听某个属性变化后异步调用api等

组件通讯常用的方法

父组件获取子组件的方法和属性：

当前父页面里，给子组件添加ref="子组件" , const "子组件" = ref(null)

在父页面里通过“子组件.value.(子组件的属性或方法)”

父组件获取子组件传回的方法参数

子页面@click = "confirm"

confirm(){

// 子页面填装数据/表单校验操作

emit(‘childrenClick’,表单校验的结果) // emit方法抛回给父组件

}

父页面@childrenClick = "parentClick($envent)"

parentClick（子页面传回来的参数）{

xxxxxxx
}

父组件传递参数到子组件

父页面：

<子组件

:'子组件接收属性1'='父组件属性1'

:'子组件接收属性2'='父组件属性2'

@子组件方法=“父组件的方法”

</子组件>

子页面通过props接收

props:{

子组件接收属性1：{

type:xxxx, required:true ,default:'xxxx'

}

子组件接收属性1：{

type:xxxx, required:true ,default:'xxxx'

}

爷孙组件通讯

爷页面

provide('爷的数据'，爷的数据)

孙页面

const '从爷爷获取的数据' = inject('爷的数据')

兄弟之间通讯

平级组件直接通讯，一般有几种做法

1：eventBus 发布订阅模式 vue 高级前端总结（—）-优快云博客

2：当前的组件属性向上抛，父组件通过ref获取当前的属性，再传递到兄弟组件。

3：通过vuex,cookies,session,缓存机制

组件的生命周期

<script>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref
} from 'vue'
 
export default {
  setup () {
    // 其他的生命周期
    onBeforeMount (() => { // DoM还没挂载，虚拟DoM已经加载
	console.log("App ===> 相当于 vue2.x 中 beforeMount")
    })
    onMounted (() => { 
    //挂载阶段，Vue已经编译过的DoM,一般在这个步骤初始化发送网络请求，开启定时器，
	    console.log("App ===> 相当于 vue2.x 中 mounted")
    })
    
    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => { // 此时数据是新的，页面是旧的。
	    console.log("App ===> 相当于 vue2.x 中 beforeUpdate")
    })
    
    onUpdated (() => { // 数据是新的，页面也是新的
    	console.log("App ===> 相当于 vue2.x 中 updated")
    })
    
    onBeforeUnmount (() => {
    // 在这边卸载组件的时候记得要清理不能被回收的东西，解绑事件，取消定时器，WebSocket
    // 如执行clearInterval,closeWebsocket,document.removeEventListener
	console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })
    
    onUnmounted (() => {
	    console.log("App ===> 相当于 vue2.x 中 destroyed")
    })
   
    return {
    }
    
  }
}
</script>