Give a PR to Vue, I didn’t expect you to reply so fast, like like like like, but the key is mobx fix this bug or vue fix it? Or are we developers using the wrong pose?

Recently, we were developing a project using Mobx + React. Then we needed to access a third party SDK optimus Prime, which was developed using Vue

Uncaught TypeError: 'set' on proxy: trap returned falsish for property '__proto__'
Copy the code

After a whole morning’s work, I finally located this problem. The following is the whole process of my debug, and the general code is as follows (I will not put the code of the company project, the code is similar to this).

const data = mobx.observable({
            name: 'like',
            age: 1,
            role: [{
                title: 'student',
                name: "111"
            }, {
                title: 'student2',
                name: "222"
            }]
        })
        var app = new Vue({
            el: '#app',
            data:data
        })
Copy the code

Data is a Proxy object, assigning it to data in Vue will report an error. Then, I think it is not a data problem, I tried to restore data toJS to a JS object, the code is as follows

 const data = mobx.observable({
            name: 'like',
            age: 1,
            role: [{
                title: 'student',
                name: "111"
            }, {
                title: 'student2',
                name: "222"
            }]
        })
        
        var app = new Vue({
            el: '#app',
            data: mobx.toJS(data)
        })
Copy the code

InitState is called when new Vue is passed in. If data is passed in, initData is called, as shown in the figure

Observe (vue’s property keys into getter/setters); Walk is a recursive method that adds a set/get method to the properties of each object.

__proto__ = target.__proto__ = target.__proto__ = target.__proto__ = target.

hasProto = '__proto__' in{} / / to figure out whether the browser/ie/reference https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/proto var noIe = ('__proto__' in{}); alert(noIe); / / orif('__proto__' in{} {the} ie)else{ie}
Copy the code

SRC = var arrayProto = array. prototype

 var arrayProto = Array.prototype;
 var arrayMethods = Object.create(arrayProto);
Copy the code

Developer.mozilla.org/zh-CN/docs/…

Retturn false = retturn false

'use strict'
    const obj2 = {};
    const p2 = new Proxy(obj, {
        set: function(target, prop, value, receiver) {
            console.log("called: " + prop + "=" + value);
            return false; }}); p2.__proto__ = Array.prototype VM765:10 Uncaught TypeError:'set' on proxy: trap returned falsish for property '__proto__'
    at <anonymous>:10:18
Copy the code

Try return true to see what happens

'use strict'
    const obj3 = {};
    const p3 = new Proxy(obj, {
        set: function(target, prop, value, receiver) {
            console.log("called: " + prop + "=" + value);
            return true; }}); Prototype called: __proto__ = [constructor: ƒ : ƒ, fill: ƒ, find: ƒ,...]Copy the code

So what does Mobx do with this proxy object, if we go back to the mobx source code,mobx is really in strict mode

'use strict'; / *! ***************************************************************************** Copyright (c) Microsoft Corporation. All Licensed under the Apache License, Version 2.0 (the"License"); you may not use
    this file except inThe compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABLITY OR non-infringement. See the Apache Version 2.0 Licensefor specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */
    /* global Reflect, Promise */
Copy the code

Looking at the processing of his set method, remember we called observable at the beginning of the data operation, and we’re going to run observableFactories, Let’s copy the observableFactories method pair into obserale. We know that we’re doing something wrong with the array method, so let’s look at what we’re doing with the array method. __proto__ is not allowed to be rewritten when mobx proxies array objects, but vue proxies array objects. Array objects are not allowed to be rewritten when vue proxies array objects

Const data = mobx. Observable ({name:}) const data = mobx. Observable ({name:})'like',
            age: 1,
            role: [{
                title: 'student',
                name: "111"
            }, {
                title: 'student2',
                name: "222"
            }]
        })
        
        var app = new Vue({
            el: '#app',
            data: mobx.toJS(data)
        })
Copy the code

Finally, give vue a PR,vue’s posva replies so fast… Github:github.com/daydream-li…