当前位置: 首页 > news >正文

Composition API(常用部分)

1. Composition API(常用部分)

文档:

​ https://composition-api.vuejs.org/zh/api.html

1) setup

  • 新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次
  • 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用

2) ref

  • 作用: 定义一个数据的响应式
  • 语法: const xxx = ref(initValue):
    • 创建一个包含响应式数据的引用(reference)对象
    • js中操作数据: xxx.value
    • 模板中操作数据: 不需要.value
  • 一般用来定义一个基本类型的响应式数据
<template><h2>{{count}}</h2><hr><button @click="update">更新</button>
</template><script>
import {ref
} from 'vue'
export default {/* 在Vue3中依然可以使用data和methods配置, 但建议使用其新语法实现 */// data () {//   return {//     count: 0//   }// },// methods: {//   update () {//     this.count++//   }// }/* 使用vue3的composition API */setup () {// 定义响应式数据 ref对象const count = ref(1)console.log(count)// 更新响应式数据的函数function update () {// alert('update')count.value = count.value + 1}return {count,update}}
}
</script>

3) reactive

  • 作用: 定义多个数据的响应式
  • const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
  • 响应式转换是“深层的”:会影响对象内部所有嵌套的属性
  • 内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据都是响应式的
<template><h2>name: {{state.name}}</h2><h2>age: {{state.age}}</h2><h2>wife: {{state.wife}}</h2><hr><button @click="update">更新</button>
</template><script>
/* 
reactive: 作用: 定义多个数据的响应式const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象响应式转换是“深层的”:会影响对象内部所有嵌套的属性内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据都是响应式的
*/
import {reactive,
} from 'vue'
export default {setup () {/* 定义响应式数据对象*/const state = reactive({name: 'tom',age: 25,wife: {name: 'marry',age: 22},})console.log(state, state.wife)const update = () => {state.name += '--'state.age += 1state.wife.name += '++'state.wife.age += 2}return {state,update,}}
}
</script>

4) 比较Vue2与Vue3的响应式(重要)

vue2的响应式

  • 核心:
    • 对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截)
    • 数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持
Object.defineProperty(data, 'count', {get () {}, set () {}
})
  • 问题
    • 对象直接新添加的属性或删除已有属性, 界面不会自动更新
    • 直接通过下标替换元素或更新length, 界面不会自动更新 arr[1] = {}

Vue3的响应式

  • 核心:
    • 通过Proxy(代理): 拦截对data任意属性的任意(13种)操作, 包括属性值的读写, 属性的添加, 属性的删除等…
    • 通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作
    • 文档:
      • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
      • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect
new Proxy(data, {// 拦截读取属性值get (target, prop) {return Reflect.get(target, prop)},// 拦截设置属性值或添加新属性set (target, prop, value) {return Reflect.set(target, prop, value)},// 拦截删除属性deleteProperty (target, prop) {return Reflect.deleteProperty(target, prop)}
})proxy.name = 'tom'   
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"
http://www.lryc.cn/news/179639.html

相关文章:

  • 驱动插入中断门示例代码
  • 1 论文笔记:Efficient Trajectory Similarity Computation with ContrastiveLearning
  • 如何做一个基于 Python 的搜索引擎?
  • Python报错:KeyError: ‘820‘
  • 【kubernetes】kubernetes中的Deployment使用
  • 百度2024校招机器学习、数据挖掘、自然语言处理方向面试经历
  • RabbitMQ原理(二):SpringAMQP编程
  • 什么是SQL注入(SQL Injection)?如何预防它
  • metrology
  • UE学习记录06----根据Actor大小自适应相机位置
  • Go-Python-Java-C-LeetCode高分解法-第八周合集
  • 数据结构--并查集
  • Leetcode 224. 基本计算器
  • Linux基础命令汇总
  • JAVA 获得特定格式时间
  • 问题: 视频颜色问题,偏绿
  • 智能文字识别技术——AI赋能古彝文保护
  • Linux压缩和解压命令大全:tar、gzip和zip完整教程
  • Vue3 reactive和ref详解
  • jvs-rules(规则引擎)和jvs智能bi(自助式数据分析)9.22更新内容
  • Leetcode算法题练习(一)
  • Xilinx FPGA 7系列 GTX/GTH Transceivers (5)-- Aurora 8b10b 信号传输实战--小试牛刀
  • 第三章:最新版零基础学习 PYTHON 教程(第七节 - Python 运算符—Python 成员身份和身份运算符)
  • 【Java 基础篇】Java 注解详解
  • MVVM框架下两窗口的消息传递
  • ROS2 从头开始​​:第6部分 - ROS2 中的 DDS,用于可靠的机器人通信
  • WebSocket的那些事(6- RabbitMQ STOMP目的地详解)
  • SQL SELECT 语句基础
  • golang工程——protobuf使用及原理
  • CocosCreator3.8研究笔记(二十三)CocosCreator 动画系统-动画编辑器相关功能面板说明