Vue3

setup

• setup 执行时机

  • 在beforeCreate之前执行仅且只执行一次,this是undefined,因此,在setup里面没有this

• setup 参数

  • props接收组件间的传参

  • context上下文对象

    • attrs 接收在props中没有接收的属性 相当于this.$attrs
    • slots 插槽 相当于 this.$slots
    • emit 触发自定义函数 相当于this.$emit

生命周期

组合式api Vu3 生命周期

ref函数

• 作用:处理无法响应的数据(简单数据类型数据)
• 原理: 通过[objectdefineProperty()对属性的读取 修改 进行拦截(数据劫持)
• 使用方法
• 

customRef()

• 说明: 创建一个自定义ref,并对其依赖项跟踪和更新触发进行显示控制
• 示例
• 

toRef函数 和 toRefs函数

• 作用: 创建一个ref 函数,其value 值指向另一个对象中的某个属性
• 语法: const name=toRef(object,'key')
• 应用: 将响应式对象中的属性提供给外部使用
• 扩展: toRefs可批量操作 语法:toRefs(object)

reactive函数

• 作用:处理无法响应的数据(对象 数组数据类型数据)
• 原理: 通过[Proxy(代理):拦截对象中任意属性的变化,包括属性的增删改查
• 使用方法
• 

Vue2响应式原理

• 实现原理:

  • 对象类型: 通过objectdefineProperty()对属性的读取 修改 进行拦截(数据劫持)
  • 数组类型: 通过重写更新数组的一系列方法来实现拦截

• 简单使用:

• 存在问题:

  • 新增属性,删除属性,界面不会更新
  • (数组)直接通过下标不可以修改数组内的数据

Vue3响应式原理

• 实现原理:

  • 通过Proxy(代理):拦截对象中任意属性的变化,包括属性的增删改查
  • 通过 Reflect(反射): 对被代理对象的属性进行操作

• 简单使用:

• 

computed

watchEffect函数

[副作用函数]  该函数的执行会影响到其他函数的函数

• 作用: 它会监听引用数据类型的所有属性，不需要具体到某个属性，一旦运行就会立即监听，组件卸载的时候会停止监听。
• 简单使用
• 

响应式数据的判断

• isRef检查一个值是否为一个ref对象
• isRactive 检查一个对象是否是由reactive创建的响应式代理
• isReadonly 检查一个对象是否由readonly 创建的只读代理
• isProxy 检查一个对象时候有reactive或 readonly 方法创建的代理

provide | inject

0. 作用跨级通信(祖孙间传参)
1. 父组件有一个provide选项来提供数据,孙组件有一个inject选项开始使用这些数据

组件通信 Vue3

• 父 传 子

  • 在 setup语法糖父组件以属性的形式传值 , 子组件 defineProps()接收
  • 在setup语法糖中,父组件可以使用v-model去传值,子组件 defineProps()接收 (适用于子组件需要修改父组件传递的数据)

• 子 传 父

  • 在setup语法糖中,子组件通过defineEmits()定义自定义事件,父组件 在 子组件标签上绑定自定义事件

• 跨组件

  • 依赖注入 父组件通过 provide 定义需要传的值 子组件使用 inject 接收

组件通信 Vue2

• 父 传 子

  • 父组件以属性的形式传值 子组件props接收 , 如果传的是简单数据类型的数据,不可以在子组件中更改父组件中的数据 如果传的是复杂数据类型的数据,可以在子组件中更改父组件中的数据
  • 方式2 (为子组件标签设置ref属性 通过 this.$ref.自定义属性名 获取 子组件对象 并调用子组件内的变量以及方法)
  • 方式3 (v-model 传值) 子组件默认props 里面的 value (必须是value) 接收 !!! 应用场景:子组件想用还想改
  • 方式4 依赖注入 父组件通过 provide 定义需要传的值 子组件使用 inject 接收

• 子 传 父

  • 父组件 在子组件标签上绑定自定义事件, 子组件 在适当时机通过 this.$emit 触发自定义事件 (父组件 在事件处理中实现具体的逻辑代码)
  • 另一种方式通过[作用域插槽] 来给父组件传值 父组件通过 v-slot ='obj' 接收 {如果传多个的话就obj . xx}

• 跨组件

  0. 做准备工作，准备事件中心对象（空的Vue实例对象） EventBus/index.js import Vue from 'vue' export default new Vue() 在接收方和传入方都引入这个事件中心对象
  1. 在接收方-组件创建完毕created(){}内使用on监听事件 created(){ eventBus.on('自定义事件名', () => {}) }
  2. 在传入方-恰当的时机触发事件中心对象监听的事件 eventBus.$emit('事件名', '实参数据.....')
  3. 在接收方事件处理函数中完成具体的功能代码

更多

0. shallowRef()

   0. 说明: 只处理简单数据类型的响应式,不处理对象
   1. 场景: 常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成

1. shallowReactive()

   0. 说明: 只处理浅层次的响应式数据(浅响应)

2. shallowReadonly()

   0. 说明: 让响应式数据变为浅只读

3. readonly()

   0. 说明: 让响应式数据变为深只读

4. toRaw()

   0. 说明: 根据vue创建的代理,返回其原始对象

5. markRow()

   0. 说明: 标记一个对象,使其永远不再成为响应式对象
   1. 场景: 不需要修改只需要展示的大列表,深层数据结构的数据,可利用此方法跳过响应式提高性能

Teleport

Teleport 是一种能够将组件html结构移动到指定位置的技术