# watch监听Props属性值失败原因

在 vue 中监听响应式数据并进行逻辑处理是一个很常见的事情，但在一次业务中突然遇到监听 Props 属性值失败的问题：

props: {
	testData: {
		type: Object,
		default: () => {}
	}
}

// 这种写法属于会有响应的情况
watch(
  () => props.testData,
  (newValue, oldValue) => {
    console.log(newValue, 'tttttnewValue', oldValue, 'tttttoldValue')
  }
)

// 这种写法属于不会有响应的情况
watch(props.testData, (newValue, oldValue) => {
  console.log(newValue, 'tttttnewValue', oldValue, 'tttttoldValue')
})

# flex布局和overflow一起使用超出滚动失效

CSS Flexbox是一种新的布局模式，旨在提供更简单和灵活的方式来排列和对齐元素。使用Flexbox，我们可以轻松地创建响应式布局，而无需使用复杂的CSS定位技巧。但是，特定情况下，Flexbox可能会与overflow: hidden属性相互影响。

# Canvas API

# 概述

<canvas>元素用于生成图像。它本身就像一个画布，JavaScript 通过操作它的 API，在上面生成图像。它的底层是一个个像素，基本上<canvas>是一个可以用 JavaScript 操作的位图（bitmap）。

它与 SVG 图像的区别在于，<canvas>是脚本调用各种方法生成图像，SVG 则是一个 XML 文件，通过各种子元素生成图像。

# 剪贴板操作 Clipboard API 教程

# 简介

浏览器允许 JavaScript 脚本读写剪贴板，自动复制或粘贴内容。

一般来说，脚本不应该改动用户的剪贴板，以免不符合用户的预期。但是，有些时候这样做确实能够带来方便，比如“一键复制”功能，用户点击一下按钮，指定的内容就自动进入剪贴板。

# Fetch API 教程

fetch()是 XMLHttpRequest 的升级版，用于在 JavaScript 脚本里面发出 HTTP 请求。