Vue Props 必须单向流动，子组件不可直接修改，应通过 data 或 ref 创建本地副本，并用事件通知父组件更新；对象/数组需深拷贝避免副作用，格式化逻辑应使用 computed 而非 data。

Vue 的 Props 必须保持单向数据流，核心就一条：子组件不能直接改 props，只能读、不能赋值。一旦写 this.xxx = newValue 或 this.obj.prop = 'xxx'（对基础类型或对象属性的直接赋值），就会触发警告 Avoid mutating a prop directly，这不是 bug，而是 Vue 在保护数据流向清晰可控。

子组件需要“可编辑”的本地状态？用 data 或 setup 初始化副本

当 props 是初始值（比如表单默认内容、弹窗开关默认状态），而子组件内部需要独立维护这个值（例如用户正在输入但还没提交），就不能复用 props 本身。

• Vue 2 写法：data() { return { localValue: this.initValue } }
• Vue 3 Composition API：const localValue = ref(props.initValue)
• 注意：这个副本和 props 完全解耦，修改它不会影响父组件，也不会被父组件重渲染覆盖

想让父组件同步更新？靠事件通知，不是自己动手改

子组件不负责改状态，只负责“喊一声”——通过事件告诉父组件：“我需要你把某个值变成这样”。父组件收到后，在自己的响应式数据里更新，新值再自动下传。

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

• 推荐写法（Vue 3）：this.$emit('update:visible', false)，父组件用 v-model:visible="dialogVisible" 自动监听
• Vue 2 兼容写法：this.$emit('update:visible', false)，父组件显式监听：@update:visible="dialogVisible = $event"
• 避免手写 @update:xxx 拼接，可用 .sync（Vue 2）或封装为支持 v-model 的组件

Props 是对象或数组时，小心“表面合规、实际越界”

虽然 this.obj.name = 'new' 不会报错（因为 Vue 对对象做的是响应式代理，不是 Object.freeze），但这仍是危险操作：

• 父组件可能在别处也用了这个对象，你的修改会意外影响其他地方
• 父组件重新赋值整个对象（obj = {...}）时，你之前的修改就丢失了
• 更安全的做法：用 toRefs + ref 拆解，或用 structuredClone 深拷贝初始化本地副本

展示逻辑用计算属性，别用 data 存冗余副本

如果只是基于 props 做格式转换（比如把时间戳转成中文日期、拼接标题），不该用 data 存一份，而该用 computed：

• 正确：computed: { formattedTitle() { return this.title?.trim().toUpperCase() || '无标题' } }
• 错误：data() { return { titleText: this.title?.toUpperCase() } } —— 这个值不会随 props 更新而更新
• 计算属性是响应式的，且不占用额外内存来存中间状态

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！