欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 手游 > vue3.0学习笔记(三)——计算属性、监听器、ref属性、组件通信

vue3.0学习笔记(三)——计算属性、监听器、ref属性、组件通信

2024/10/24 16:33:58 来源:https://blog.csdn.net/weixin_56370772/article/details/140673740  浏览:    关键词:vue3.0学习笔记(三)——计算属性、监听器、ref属性、组件通信

1. computed 函数

定义计算属性:

  • computed 函数,是用来定义计算属性的,计算属性不能修改。
  • 计算属性应该是只读的,特殊情况可以配置 get set
  • 核心步骤:
    • 导入  computed 函数
    • 执行函数 在回调参数中  return 基于响应式数据做计算的值 ,用 变量接收

1.1 基本使用:

1.2 高级用法(set和get方法)

总结:计算属性两种用法

  • 给 computed 传入函数,返回值就是计算属性的值
  • 给 computed 传入对象,get 获取计算属性的值,set 侦听设置计算属性改变。
  • get 获取值需要返回一个值,set 设置值需要接收设置的值。

2. watch函数

watch函数,是用来定义侦听器的

  • 作用: 侦听一个或者多个数据的变化,数据变化时执行回调函数
  • watch函数的第一个参数 响应式对象
  • 俩个额外参数:1. immediate(立即执行) 2. deep(深度侦听)
基础使用:
  • 导入watch函数
  • 执行watch函数传入要侦听的响应式数据(ref对象)和回调函数

2.1 侦听单个数据

  • 侦听ref定义的响应式数据

2.2 deep 深度侦听

  • 侦听 reactive 定义的响应式数据(复杂数据类型),deep 深度侦听
  • 默认机制:通过 watch 监听的 ref 对象默认是 浅层侦听的,直接修改嵌套的对象属性不会触发回调执行 ,需要开启 deep 选项

deep 深度侦听,默认 watch 进行的是浅层侦听,不加 deep: true 侦听不到。

原因:
        因为 watch 侦听的是 user 这个对象,对 user 内部的 name 属性值进行更改后,不会导致整个 user 的地址发生改变。所以侦听不到,只有把这个对象的地址完全改变才能侦听到。

2.3 侦听多个数据的变化

  • 同时侦听多个响应式数据的变化,不管哪个数据变化都需要执行回调

2.4 立即侦听

  • 在侦听器创建时立即触发回调, 响应式数据变化之后继续执行回调

2.5 精确侦听对象的某个属性

  • 在不开启 deep 的前提下,侦听属性 name 值的变化,只有 name 变化时才执行回调
  • 可以把第一个参数写成函数的写法,返回要监听的具体属性

3. ref属性

获取 DOM 或者组件实例可以使用 ref 属性,写法和 vue2.0 需要区分开

  • vue2.0 获取单个 DOM 或者组件

  • vue3.0 获取单个 DOM 或者组件

  • 获取 v-for 遍历的 DOM 或者组件

4. 组件通信

4.1 父传子与子传父

  • 父组件

  • 子组件

总结:

  • 父传子:在 setup 中使用 props 数据 setup(props){ // props就是父组件数据 }
  • 子传父:触发自定义事件的时候emit来自 setup(props,{emit}){ // emit 就是触发事件函数 }

4.2 依赖注入(provide与inject)

使用场景:有一个父组件,里头有子组件,有孙组件,有很多后代组件,共享父组件数据。

  • 根组件:

  • 子组件

  • 孙子组件

总结:

  • provide函数提供数据和函数给后代组件使用
  • inject函数给当前组件注入provide提供的数据和函数

5. mixins语法

官方话术:

  • 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

5.1 全局混入:所有组件混入了这些逻辑代码

  • vue 2.0 写法
// 全局混入 全局mixin
// vue2.0 写法  Vue.mixin({})
app.mixin({methods: {say () {console.log(this.$el,'在mounted中调用say函数')}},mounted () {this.say()}
})
  • vue 3.0 写法

5.2 局部混入:通过mixins选项进行混入

假设两个组件内部需要使用相同的代码逻辑,可以先建一个js文件,封装重复的代码,并且导出该对象。

使用配置对象 mixins,以数组的形式接收导出的对象,模版直接使用导出对象里的方法。 

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com