某些东西会在控制台中触发警告？为啥不推荐它，你将如何解决它？

Posted 2023-02-23

【中文标题】某些东西会在控制台中触发警告？为啥不推荐它，你将如何解决它？

【英文标题】：Something will trigger a warning in the console? Why is it not recommended and how would you fix it?某些东西会在控制台中触发警告？为什么不推荐它，你将如何解决它？

【发布时间】：2020-03-03 11:38:36

【问题描述】：

这是关于 javascript 和 VueJs 的良好实践和知识。

我已经评论了 Type Api 以查看其他警告是否仍然存在

<script>
    export default 
        name: "printer",
        props: 
            model: 
                type: String,
                required: true
            ,
            ip: 
                type: String,
                required: true
            ,
            jobs: 
                type: Object,
                validator: (value) => ["inProgress", "done", "error"].every((status) => typeof value[status] === "number")
    ,
    progress: 
        type: Number,
            required: true
    ,
    api: 
        type: Api,
            required: true
    
    ,
    data: () => (
        timer: null
    ),
        methods: 
        async refreshProgress() 
            this.jobs = await this.api.getJobsNumbers( model: this.model );
        
    ,
    created() 
        this.timer = setInterval(() => this.refreshProgress(), 30000);
    ,
    destroyed() 
        clearInterval(this.timer);
    
    ;
</script>

所以我正在寻找建议，因为我是 VueJS 的初学者，需要描述和目的更改

【问题讨论】：

您在控制台看到的错误是什么？

vue.runtime.esm.js?2b0e:619 [Vue 警告]: Missing required prop: "model" found in ---> at src/App.vue warn @ vue.runtime.esm.js?2b0e:619 vue.runtime.esm.js?2b0e:619 [Vue 警告]：缺少必需的道具：“ip”在 ---> at src/App.vue warn @ vue.runtime.esm.js?2b0e:619 vue.runtime.esm.js?2b0e:619 [Vue warn]: Missing required prop: "progress" found in ---> at src /App.vue

用您使用组件的部分代码（模板）更新您的问题......

【参考方案1】：

问题缺少确切的警告文本，所以我只是猜测您所说的警告可能是这样的：

[Vue 警告]：避免直接改变 prop，因为每当父组件重新渲染时，该值都会被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的道具：“工作”

换句话说，您正在改变子组件中父级的状态，这不是一个好主意，这就是 Vue 警告您的原因。

有几种方法可以解决它：

复制道具并将其存储在组件数据中。仅更新内部状态。家长将看不到更改 不是改变 jobs 属性，而是触发一个自定义事件，将新状态（从 API 调用返回）作为参数传递。 Parent 需要处理事件并使用新值更新自己的状态（更新将通过 prop 流回子组件） 如果您绝对确定您的printer 组件将是jobs 对象将被变异的唯一位置，您可以改变对象的属性而不是替换整个对象而不会出现任何警告。这是可能的，但不推荐...

更多信息请参见Vue documentation 或一些very related SO questions